试图让 jQuery 事件在选择/选项表单上触发 onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6540541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trying to get a jQuery event to Fire onClick on a select/option form
提问by Erik
I have a form, one of the fields is a select field, with 5 options. When the 5th option is clicked, I want a hidden div to be shown. I want nothing to happen with the other 4 are clicked.
我有一个表单，其中一个字段是选择字段，有 5 个选项。单击第 5 个选项时，我希望显示一个隐藏的 div。我不希望其他 4 个被点击。
It works on FireFox, but no where else. After researching it a little, it seems that Chrome/IE don't let you do the onClick firing with select. So far all suggestions have been to use onChange on the Select as a whole, but I haven't been able to figure it out to just fire the code when the 5th option is clicked using onChange. Any help would be appreciated.
它适用于 FireFox，但不适用于其他地方。稍微研究一下后，似乎Chrome/IE 不允许您使用select 进行onClick 触发。到目前为止，所有建议都是在 Select 整体上使用 onChange，但我无法弄清楚在使用 onChange 单击第 5 个选项时仅触发代码。任何帮助，将不胜感激。
Custom proptions is set to display: none;by default. I want the div id'd *custom_proptions* to show when the option id'd *custom_proptions_option* is clicked, and also want it to re-hide itself if it is shown first, and then one of the other options are clicked.
自定义道具设置为显示：无；默认情况下。我希望 div id'd *custom_proptions* 在单击选项 id'd *custom_proptions_option* 时显示，并且还希望它在首先显示时重新隐藏自己，然后单击其他选项之一。
<div class="proptions_container">
<select name="proptions" id="proptions" class="proptions">
<option value="0" class="default_proptions" id="choose_prompt">Choose your Proptions…</option>
<option value="1" class="default_proptions">Yes <strong>or</strong> No</option>
<option value="2" class="default_proptions">Before <strong>or</strong> On/After</option>
<option value="3" class="default_proptions">More than <strong>or</strong> Less than</option>
<option value="4" class="default_proptions">Better <strong>or</strong> Worse</option>
<option value="5" id="custom_proptions_option">A <strong>or</strong> B (customize below)</option>
</select>
<div id="custom_proptions">
<input name="proption_1" type="text" class="text" id="proption_1" placeholder="First Proption" />
<span id="custom_or">or</span>
<input name="proption_2" type="text" class="text" id="proption_2" placeholder="Second Proption" />
</div>
<script>
$('option#custom_proptions_option').click(function() {
$('div#custom_proptions').slideDown('slow');
});
$('option.default_proptions').click(function() {
$('div#custom_proptions').slideUp('slow');
});
</script>
</div>
回答by FishBasketGordo
Do it in the change event, but only for the desired value:
在更改事件中执行此操作，但仅限于所需的值：
<script>
$('#proptions').change(function() {
if ($(this).find(':selected').val() === '5') {
$('div#custom_proptions').slideDown('slow');
} else {
$('div#custom_proptions').slideUp('slow');
}
});
</script>
回答by Uku Loskit
The clickedis not the right event here. You should use change.When the event is fired, you check it's id/class(or better yet, the value in your case) and show the div if necessary.
这clicked不是正确的事件。你应该使用change.When 事件被触发，你检查它的 id/class（或者更好的是，你的情况下的值）并在必要时显示 div。
回答by Jason Spick
Try using
尝试使用
$("selector").live('click',function(){
});
I have much better luck with it.
我的运气要好得多。
