質問する
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 クラスのオプションのみを示します。
解決策については、このフィドルを確認してください。 http://jsfiddle.net/BuddhiP/2BBrD/
于 2012-12-13T05:44:48.243 に答える
0
メソッドを使用して既存のオプションを削除してから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));
});
于 2012-12-13T05:43:41.640 に答える
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 に答える
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;
});
于 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
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 に答える