1

好的,所以我正在尝试根据下拉菜单的 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>

我的脚本:

var choice = getElementById("product-select").selectedIndex;

if (choice == 1){

    $('#checkbox').change(function(){
        $('#hide').removeClass('hidden');
    });

}

和 CSS:

.hidden {
    display:none
}

以及 jfiddle 上的链接:http: //jsfiddle.net/AFrjz/2/

我一直试图解决这个问题好几个小时,但似乎无法做到。

非常感谢!

4

3 回答 3

2

您可以像这样以 jQuery 方式完成所有操作:http: //jsfiddle.net/AFrjz/6/

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

您必须在更改时获取选定的索引,<select>然后在 中进行比较if

无需调用 change 函数checkbox来隐藏或显示自身。

于 2013-01-28T05:42:32.457 回答
0

您需要进行以下更正。

  • 你有文件。在 getElementById 之前。更改getElementByIddocument.getElementById
  • 您将更改事件与隐藏复选框绑定,因此您将无法触发事件显示复选框来选择它。
  • 在事件处理程序中添加条件,而不是在条件中绑定事件。

现场演示

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

在select中查看选中第二项的效果removeClass并选中复选框。

于 2013-01-28T05:18:26.267 回答
0

试试这个

if (choice == 1){

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

}

更新

当有人在我的下拉菜单中选择第二个选项(selectedIndex 为 1)时,我希望 id=hide 的 div 出现,如果他们选择不同的选项,则再次消失。

我使用了选择框的更改事件..并检查了所选值..如果值是您的第二个选项的值..然后删除类否则添加类

$("#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
 }

});

在这里摆弄

于 2013-01-28T05:20:20.507 回答