Question

我已经有以下代码隐藏了页面加载时的epcCatHide6选择框，我希望它只显示选择epcCat [1]选项3时的epcCatHide6选择框。这就是我已经拥有的，

<select name="epcCat[1]" class="formElements" id="category">
<option value="1">Blah</option>
<option value="3">Blah Blah</option>
<option value="4">Blah Blah Blah</option>
<option value="5">Etc</option>
<option value="180">Etc Etc</option>
</select>

<select name="epcCat[6]" class="formElements" id="category">
<option value="0">-----</option>
<option value="181">12</option>
<option value="182">11</option>
<option value="183">10</option>
</select>

<style type="text/css">.epcCatHide6 {display:none}</style>

<script type="text/javascript">
$(document.body).on('change','select[name="epcCat[1]"]',function(){
var newstyle = document.createElement("style");
newstyle.appendChild(document.createTextNode(".epcCatHide6{display:block!important}"));
document.body.appendChild(newstyle);
});
</script>

当只有epcCat [1]选项＆＃39; 3＆＃39;时，如何让它工作？被选中了？非常感谢您提供的任何建议。

Answer 1

您应该在您选择的npm test上使用onchange处理程序。另外，请记住保持您的ID唯一。

<select>

Answer 2

试试这个，希望你的应用已经包含jQuery库

$('body').on('change','[name="epcCat[1]"]',function(){
        val = $(this).val();
        if(val =="3"){ console.log('its three'); $('.epcCatHide6').show();  }
    });

Answer 3

答案是＆＃34;不要＆＃34; 不要更改CSS声明，而是可以添加和删除可影响可见性的其他类，只留下.epcCatHide6 CSS声明。

但更简单，因为您已经在使用jQuery，所以可以使用其.show()和.hide()方法。

首先，您必须修复HTML - 您的两个选择控件都使用id="category"且无效。 id在页面中必须是唯一的也许你的意思是这两个都是＆＃34;类别的东西＆＃34 ;;在这种情况下，它应该是class="category"（类应该描述是的内容，而不是 看起来 < / em>的）
也许你真的想确定哪个是哪个;那么你想要两个不同的 ID ...我会做两件事 - 将它们更改为类以使HTML有效并添加一个唯一的id以防你需要定位它们准确。

您还可以定义CSS类.epcCatHide6，但不要在HTML中的任何位置使用 ...我会将您的选择包装在div中并将其放入在div上课。

这给...

<div class="plain"> <select name="epcCat[1]" id="cat1" class="formElements category"> <option value="1">Blah</option> <option value="3">Blah Blah</option> <option value="4">Blah Blah Blah</option> <option value="5">Etc</option> <option value="180">Etc Etc</option> </select> </div> <div class="epcCatHide6"> <select name="epcCat[6]" id="cat6" class="formElements category"> <option value="0">-----</option> <option value="181">12</option> <option value="182">11</option> <option value="183">10</option> </select> </div>

现在，当您从epcCat[1]中选择选项3时，您只需$(".epcCatHide6").show()，当您选择其他内容时，要再次隐藏它，只需致电$(".epcCatHide6").hide()

$('body').on('change','[name="epcCat[1]"]', function() { val = $(this).val(); if (val == '3') { $('.epcCatHide6').show(); } else { $('.epcCatHide6').hide(); } });

更好的是，你可以使用jQuery .toggle()，它接受一个参数告诉要么显示或隐藏 - 是 - ＆gt; show和false - ＆gt;隐藏。

这使您的处理程序更简单：

$('body').on('change','[name="epcCat[1]"]', function() { val = $(this).val(); $('.epcCatHide6').toggle( val == '3' ); // shows when 3, hides when anything else. });

这里全部放在一起......

＆＃13;
＆＃13;
$('body').on('change','[name="epcCat[1]"]', function() { val = $(this).val(); $('.epcCatHide6').toggle( val == '3' ); // shows when 3, hides when anything else. });
＆＃13;
.epcCatHide6 { display: none; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Pick <em>Blah Blah = 3</em> to show the other select control. <div class="plain"> <select name="epcCat[1]" id="cat1" class="formElements category"> <option value="1">Blah = 1</option> <option value="3">Blah Blah = 3</option> <option value="4">Blah Blah Blah = 4</option> <option value="5">Etc = 5</option> <option value="180">Etc Etc = 180</option> </select> </div> <div class="epcCatHide6"> <select name="epcCat[6]" id="cat6" class="formElements category"> <option value="0">-----</option> <option value="181">12</option> <option value="182">11</option> <option value="183">10</option> </select> </div>
＆＃13;
＆＃13;
＆＃13;

- 或者a fiddle你可以分叉......并且...摆弄。
updated fiddle包括设置页面加载的可见性，以防第一个选择的值已经3。

如何通过所选下拉框选项的值更改css声明

3 个答案: