问问题
3371 次
6 回答
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 类的选项。
检查this fiddle以获得解决方案。 http://jsfiddle.net/BuddhiP/2BBrD/
于 2012-12-13T05:44:48.243 回答
0
我认为这是使用数据属性的绝佳机会
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/
于 2012-12-13T05:49:08.907 回答
0
见：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>');
}
});
于 2012-12-13T05:49:43.570 回答
0
您可以使用该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));
});
于 2012-12-13T05:43:41.640 回答
0
如果您使用的是 JQUERY，您可以捕获 colorlink 的点击事件，然后修改并刷新 select#size DOM。
$(document).on('click', '.colorlink', function() {
var v = $(this).val();
现在您可以根据 val 隐藏特定的选择元素，或者只创建一个全新的 html 选择字符串并分配新的 HTML 选择，如下所示：
$('select#size').html(newhtmlstring).selectmenu("refresh", true);
于 2012-12-13T05:45:16.230 回答
0
我们还可以使用以下方式，我们可以动态地将列表变成一个对象，并将该对象注入到 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>
于 2012-12-13T05:59:04.180 回答