Javascript Jquery自动选择同一类的选项
我有三个“film”类的选择选项下拉菜单,但是这些值是链接的,所以我必须选择全部才能得到结果。在我的例子中,HTML代码如下所示:Javascript Jquery自动选择同一类的选项,javascript,jquery,Javascript,Jquery,我有三个“film”类的选择选项下拉菜单,但是这些值是链接的,所以我必须选择全部才能得到结果。在我的例子中,HTML代码如下所示: <select name="sc30" id="sc30" onchange="autoSelect()" class="film"> <option>Choose an option...</option> <option>---</option> <option>Wh
<select name="sc30" id="sc30" onchange="autoSelect()" class="film">
<option>Choose an option...</option>
<option>---</option>
<option>White</option>
<option>Black</option>
</select>
<select name="ij10" id="ij10" onchange="autoSelect()" class="film">
<option>Choose an option...</option>
<option>---</option>
<option>Red</option>
<option>Green</option>
<option>Gold</option>
</select>
<select name="sc100" id="sc100" onchange="autoSelect()" class="film">
<option>Choose an option...</option>
<option>---</option>
<option>Gold glossy</option>
<option>Silver glossy</option>
</select>
尝试以下操作:从所有选择框中删除
onchange=“autoSelect()”
,并绑定change
事件,如下所示,并为每个选择框选择第二个选项
,但触发了change
事件的当前选择框除外-
$(function(){
$('.film').change(function(){
//iterate all other select box except current using `not(this)`
$('.film').not(this).each(function(){
// get selected option for the current select box
var $selected = $(this).find('option:selected');
// if index of selected option is greater than 1,
// it means option is selected.
if($selected.index()>1)
$(this).val($(this).find('option:eq(1)').val());
});
});
});
$(函数(){
$('select.film')。在('change',function()上{
var cb=$(本);
如果(2==cb.prop('selectedIndex')){
$('select.film').not(cb.prop('selectedIndex',1);
}
});
});代码>
选择一个选项。。。
---
白色的
黑色的
选择一个选项。。。
---
红色的
绿色的
黄金
选择一个选项。。。
---
金光
银光
我只是删除了这两行代码:
var $selected = $(this).find('option:selected');
if($selected.index()>1)
而且已经可以了
$(function(){
$('.film').change(function(){
//iterate all other select box except current using `not(this)`
$('.film').not(this).each(function(){
$(this).val($(this).find('option:eq(1)').val());
});
});
});
$(function(){
$('.film').change(function(){
//iterate all other select box except current using `not(this)`
$('.film').not(this).each(function(){
$(this).val($(this).find('option:eq(1)').val());
});
});
});