Question

我想基于选择下拉选项值/类别单击来隐藏/显示div。但是我无法选择这样做，因为Chrome不支持此功能。任何人都可以帮助我找到一种简单的方法，我可以在单击时为选项类/值编写jquery脚本。在网络上，我发现点击功能在Chrome中不起作用。

这是我的代码。

<select id="dd1" style="width: 12%">
<option class="all" value="all">Select below 1</option>
<option id="opt1" class="opt1" value="opt1">option 1</option>
<option class="opt2" value="opt2">option 2</option>
<option class="opt3" value="opt3">option 3</option>
<option class="opt4" value="opt4">option 4</option>
</select>

<select id="dd2" style="width: 12%">
<option value="all">Select below 1</option>
<option class="opt5" value="opt5">option 5</option>
<option  class="opt6" value="opt6">option 6</option>
<option class="opt7" value="opt7">option 7</option>
<option class="opt8" value="opt8">option 8</option>
</select>

here is the jquery code

$(document).ready(function () {
$('.opt1').on('click',function(){

$('.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal14, .modal15, .modal16, .modal17, .modal18, .modal19, .modal20, .modal21, .modal23, .modal24, .modal25, .modal26').show();    
$('.modal22').hide();

$("#dd2 option[value='2']").remove();

}); 

$('.fids1').on('click',function(){
$('.modal22').show();
$('.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal14, .modal15, .modal16, .modal17, .modal18, .modal19, .modal20, .modal21, .modal23, .modal24, .modal25, .modal26').hide();    


$("#dd2 option[value='2']").remove();

}); 

});

Answer 1

您正在以错误的方式思考它：

$('.opt1').on('click',function(){
  //...
});

当<option/>被“点击”时，您不想执行。相反，您想在<select/>值更改为特定值时执行。

类似这样的东西：

$('#dd1').on('change',function(){
  if ($(this).val() === 'opt1') {
    //...
  }
});

如何在选择下拉列表中使用jQuery选择选项类/值

1 个答案: