使用jQuery删除基于selectedIndex的类

好的，我正试图删除一个基于下拉菜单selectedIndex的类，具体来说，我希望当有人选择我下拉菜单中的第二个选项（selectedIndex为1）时，id为hide的div出现，如果他们选择了其他选项，它将再次消失

以下是我的html代码：

<div id="product-variants">      
                <select id="product-select" name="id">

                        <option value="269270508">No Charm</option>

                        <option value="269270608">Heart (Add $25)</option>

                        <option value="269270614">Horseshoe Bead (Add $25)</option>

                        <option value="269270666">Crystal Horseshoe (Add $25)</option>

                        <option value="269270692">Cowgirl Cross (Add $25)</option>

                        <option value="269270732">Lucky Charm (Add $35)</option>

                        <option value="270460652">Round (Add $25)</option>

                        <option value="269270562">Small Star (Add $20)</option>

                        <option value="269270598">Large Star (Add $25)</option>
    </select>
</div>

<div id="hide" class="hidden"><form>
<input id="checkbox" type="checkbox" name="vehicle" value="Bike">Engraving?<br>
</form>
    <form>
Engraving Message: <input type="text" name="engraving"><br>
        </form></div>

和CSS：

.hidden {
    display:none
}

以及JFIDLE上的链接：

我已经想了好几个小时了，但似乎做不到

---

非常感谢

您需要进行以下更正

• 你有文件。在getElementById之前。将getElementById更改为

  document.getElementById

• 您已使用隐藏复选框绑定更改事件，因此无法 要触发事件显示，请选中复选框
• 在事件处理程序中添加条件，而不是在条件中绑定事件

$('#checkbox').change(function(){    
   var choice = document.getElementById("product-select").selectedIndex;
    alert(choice)
   if (choice == 1){
     $('#hide').removeClass('hidden');
   }
});

要查看

removeClass

的效果，请在选择并选中复选框中选择第二项。

尝试此操作

if (choice == 1){

  //$('#checkbox').change(function(){ you are callinjg a change event here... so the hide is not fired..
    $('#hide').removeClass('hidden');
 // });

}

已更新

当有人在我的下拉菜单中选择第二个选项（selectedIndex of 1）时，我希望id为hide的div出现，如果他们选择了其他选项，它将再次消失

我使用了selectbox的change事件。。并检查所选值。。如果值是第二个选项的值。。然后删除类else addclass

$("#product-select").change(function(){
 var choice = $(this).val()

 if (choice == '269270608'){

//$('#checkbox').change(function(){
    $('#hide').removeClass('hidden');  //remove class here
//});

 }else{
    $('#hide').removeClass().addClass('hidden');  //else addclass
 }

});

---

您可以用jQuery这样做：

您必须在更改

时获取所选索引，然后在

中进行比较（如果
）

无需调用
复选框上的change函数来隐藏或显示它自己。
太棒了，我试过的时候就可以了。但这里有一个新问题：我试图在一家Shopify商店中使用它，但由于某种原因它不起作用，不确定你是否有任何经验。我也尝试过这个，在我尝试它时效果很好，但在Shopify内部没有运气。在Shopify之外效果很好，但在Shopify内部无法实现。
$("#product-select").change(function(){
 var choice = $(this).val()

 if (choice == '269270608'){

//$('#checkbox').change(function(){
    $('#hide').removeClass('hidden');  //remove class here
//});

 }else{
    $('#hide').removeClass().addClass('hidden');  //else addclass
 }

});

$('#product-select').change(function () {
   var choice = $("#product-select option:selected").index();
   if (choice == 1) {
       $('#hide').removeClass('hidden');
   } else {
       $('#hide').addClass('hidden');
   }
});