更改 <select> onclick 的内容答案

【问题标题】：Change content of a <select> onclick更改 <select> onclick 的内容
【发布时间】：2012-12-13 05:24:14
【问题描述】：

我在页面上填写了购买 T 恤的表格。有一个颜色列表，a 用于显示可用尺寸的列表。

我的问题是尺寸会因选择的颜色而异。我正在寻找一种方法来更改选择其中一种颜色时的内容。

这是表格：

<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"/>

这是我想做的：

页面加载后，框会显示上面的默认选项
如果单击蓝色，则应该只有小和中选项可用。
如果单击绿色，则只有小、中和超大选项可用
如果点击黑色，所有尺寸都应该可用

感谢您的帮助！

【问题讨论】：

标签： javascript jquery html forms select

【解决方案1】：

也许您可以将 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/

【讨论】：

【解决方案2】：

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

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

如果您在对象中有新选项，您可以点击蓝色：

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));
});

【讨论】：

【解决方案3】：

如果您使用的是 JQUERY，您可以捕获 colorlink 的点击事件，然后修改并刷新 select#size DOM。

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

现在您可以根据 val 隐藏特定的选择元素，或者只创建一个全新的 html 选择字符串并像这样分配新的 HTML 选择：

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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>');
}
});

【讨论】：

【解决方案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>

【讨论】：