更改内容的onclick

Question

我页面的表单买一件T恤。有一个颜色列表，用于显示可用大小的列表。

我的问题是，尺寸将取决于所选择的颜色而有所不同。我正在寻找一种方法来更改选择某种颜色时的内容。

这里的形式：

<a onclick="document.getElementById('productColor').value='2';" class="colorlink"><img src="BLACK.gif"></a> 
<a onclick="document.getElementById('productColor').value='63';" class="colorlink"><img src="BLUE.gif"></a> 
<a onclick="document.getElementById('productColor').value='66';" class="colorlink"><img src="GREEN.gif"></a> 

<select id="size" name="size"> 
<option value="2" >SMALL</option> 
<option selected value="3" >MEDIUM</option> 
<option value="4" >LARGE</option> 
<option value="5" >X-LARGE</option> 
</select> 

<input type="hidden" name="color" id="productColor" value="2"/> 

这里就是我想要做的：

• 当加载页面时，该框会显示上述
• 默认选项，如果点击蓝色，那么只有Small和Medium选项可用。
• 如果点击绿色，那么只有小型，中型和X-LARGE选项应该可以
• 如果黑色被点击时，所有的尺寸应可

感谢您的帮助！

Answer 1

您可以通过使用empty方法删除现有的选项，然后添加新的选项：

var option = $('<option></option>').attr("value", "option value").text("Text"); 
$("#size").empty().append(option); 

如果你有你的新选项的对象，你可以在Blue点击即：

var newOptions = {"Option 1": "Small", 
    "Option 2": "Medium" 
}; 

var $el = $("#size"); 
$el.empty(); // remove old options 
$.each(newOptions, function(key, value) { 
    $el.append($("<option></option>") 
    .attr("value", value).text(key)); 
}); 

Answer 2

可能是你可以CSS类添加到与颜色你的选择，并显示/当用户点击链接的颜色使用jQuery隐藏起来。

注：我没有跟着你可用大小列表为信，但你的想法。

<a value="2" class="colorlink" href="#">BLACK</a> 
<a value="63" class="colorlink" href="#">BLUE</a> 
<a value="66" class="colorlink" href="#" >GREEN</a> 
<br /> 

<input type="hidden" name="color" id="productColor" value="2"/> 

<select id="size" name="size"> 
<option value="2" class="c2 c63" >SMALL</option> 
<option selected value="3" class="c2 c63 c66" >MEDIUM</option> 
<option value="4" class="c2">LARGE</option> 
<option value="5" class="c2 c63 c66">X-LARGE</option> 
</select>​ 

的JavaScript：

$(function() { 
    $('.colorlink').click(function() { 
     $('#productColor').val($(this).attr('value')); 
     $('#size option').hide(); // hide all options 
     $('#size option.c' + $(this).attr('value')).show(); // show only the options with class c2, c63, or c66 
    }); 
});​ 

在这里，你只显示与对应的CSS类的选项。

检查这个捣鼓的解决方案。 http://jsfiddle.net/BuddhiP/2BBrD/

Answer 3

如果您使用的是JQUERY，您可以捕获colorlink的click事件，然后修改并刷新选择＃大小的DOM。

$(document).on('click', '.colorlink', function() { 
    var v = $(this).val(); 

现在你既可以隐藏基础上，VAL具体选择元素，或仅仅建立一个全新的HTML选择串并分配新的HTML选择，像这样：

$('select#size').html(newhtmlstring).selectmenu("refresh", true); 

Answer 4

我认为这是一个完美的机会来使用数据属性

HTML

<a href="#" data-color="2" data-size="3" class="colorlink">Black</a> 
<a href="#" data-color="63" data-size="4" class="colorlink">Blue</a> 
<a href="#" data-color="66" data-size="5" class="colorlink">Green</a> 

jQuery的

​$(".colorlink").click(function(){ 
    var $me = $(this); 

    $("#productColor").val($me.data('color')); 
    $("#size").val($me.data('size')); 

    return false; 
});​​​​​​​​​​​​​​ 

演示：http://jsfiddle.net/YGAgG/

Answer 5

参见：http://jsfiddle.net/eF8w7/1/

HTML：

<a value="2" class="colorlink"><img src="BLACK.gif"></a> 
<a value="63" class="colorlink"><img src="BLUE.gif"></a> 
<a value="66" class="colorlink"><img src="GREEN.gif"></a> 

<select id="size" name="size"> 
<option value="2" >SMALL</option> 
<option selected value="3" >MEDIUM</option> 
<option value="4" >LARGE</option> 
<option value="5" >X-LARGE</option> 
</select> 

JS：

$('a').click(function() { 
var val = $(this).attr("value"); 
if (val == "2") { 
    $('#size').empty().append('<option selected="selected" value="2">SMALL</option>').append('<option value="3">MEDIUM</option>'); 
} 
else if (val == "63") { 
    $('#size').empty().append('<option selected="selected" value="2">SMALL</option>').append('<option value="3">MEDIUM</option>').append('<option value="5">X-LARGE</option>'); 
} 
else { 
    $('#size').empty().append('<option selected="selected" value="2">SMALL</option>').append('<option value="3">MEDIUM</option>').append('<option value="4">LARGE</option>').append('<option value="5">X-LARGE</option>'); 
} 
});​ 

Answer 6

我们还可以用下面的方式，我们可以让列表动态成一个对象，并注入该对象到LIST

看到这里工作示例FIDDLE

<html> 
<script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.8.2.min.js" ></script> 
<body> 
<a id="black" href="#">BLACK</a> 
<a id="blue" href="#">BLUE</a> 
<a id="green" href="#">GREEN</a> 

<select id="Cars2" size="3"> 
<option value="2" >SMALL</option> 
<option selected value="3" >MEDIUM</option> 
<option value="4" >LARGE</option> 
<option value="5" >X-LARGE</option> 
</select> 


</body> 
<script> 
var Black = { 
    val1 : 'SMALL', 
    val2 : 'MEDIUM', 
    val3 : 'LARGE', 
    val4 : 'X-LARGE' 
}; 

var Blue = { 
    val1 : 'SMALL', 
    val2 : 'MEDIUM' 
}; 

var Green = { 
    val1 : 'SMALL', 
    val2 : 'MEDIUM', 
    val3 : 'X-LARGE' 
}; 


$('#green').click(function(){ 
document.getElementById("Cars2").options.length = 0; 
$.each(Green, function(val, text) { 
    $('#Cars2').append(new Option(text,val)); 
}); 
}); 

$('#blue').click(function(){ 
document.getElementById("Cars2").options.length = 0; 
$.each(Blue, function(val, text) { 
    $('#Cars2').append(new Option(text,val)); 
}); 
}); 

$('#black').click(function(){ 
document.getElementById("Cars2").options.length = 0; 
$.each(Black, function(val, text) { 
    $('#Cars2').append(new Option(text,val)); 
}); 
}); 

</script> 
</html>​