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

这就是我想要做的事情：

加载页面时，该框将显示上面的默认选项
如果单击蓝色，则只有小型和中型选项可用。
如果单击绿色，则只有小，中和X大选项可用
如果单击黑色，则应提供所有尺寸

感谢您的帮助！

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

Answer 2

您可以使用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 3

如果您正在使用JQUERY，您可以捕获colorlink的click事件，然后修改并刷新select＃size 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>

更改<select> onclick </select>的内容

6 个答案: