我试图在创建后隐藏一个选择控件。所以我在chosen:ready
上设置了一些代码来隐藏容器。但似乎没有触发事件。
Repro :codepen
HTML :
<div style="width:200px;" id="MCchsn_id711552766_2">
<select id="id711552766_2" style="width:100%" name="id711552766_2">
<option disabled="disabled" selected="selected">[Select]</option>
<option>ChoiceA</option>
<option>ChoiceB</option>
</select>
</div>
JS :
$(function() {
$("#id711552766_2").chosen();
$("#id711552766_2").on("update",function () { console.log($(this).text);});
$("#id711552766_2").on("chosen:ready",function() {$("#MCchsn_id711552766_2").hide();alert("hidden");});
});
我错过了什么?
答案 0 :(得分:5)
之前我遇到过同样的问题,并且认为在实例化选择之前需要绑定。请尝试以下方法:
$(function() {
$("#id711552766_2").on("change", function() {
console.log($(this).val());
});
$("#id711552766_2").on("chosen:ready", function() {
$("#MCchsn_id711552766_2").hide();
alert("hidden");
});
$("#id711552766_2").chosen();
});
&#13;
<div style="width:200px;" id="MCchsn_id711552766_2">
<select id="id711552766_2" style="width:100%" name="id711552766_2">
<option disabled="disabled" selected="selected">[Select]</option>
<option>ChoiceA</option>
<option>ChoiceB</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.js"></script>
&#13;
注意:我在代码中注意到的另一件事是你试图写入选定的值。要实现这一目标,您需要更改:
$(this).text
到
$(this).val().
答案 1 :(得分:3)
您的代码必须以适当的方式排列.jQuery是自上而下的方法。 Check Code Here
$(function() {
$("#id711552766_2").on("chosen:ready" , function() {
$("#MCchsn_id711552766_2").css('display','none');
alert("hidden");
});
$("#id711552766_2").chosen();$("#id711552766_2").on("update",function() {
console.log($(this).text);
});
});`