试图让一个jQuery事件Fire onClick在选择/选项表单上 [英] Trying to get a jQuery event to Fire onClick on a select/option form

问题描述

我有一个表单，其中一个字段是一个选择字段，有5个选项。当第五个选项被点击时，我想要显示一个隐藏的div。我不希望其他4人被点击。

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.

它适用于FireFox，但没有其他地方。经过一番研究，似乎Chrome / IE不会让你用select做onClick射击。到目前为止，所有的建议都是使用onChange作为一个整体，但是我一直没能弄明白只有在使用onChange点击第5个选项时才触发代码。任何帮助将不胜感激。

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.

默认情况下，自定义提示设置为 display：none; 。我希望div id'd * custom_proptions *在单击选项id'd * custom_proptions_option *时显示，并且还希望它在重新显示时自动重新隐藏，然后单击其中一个选项。

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 class="proptions_container">

<select name="proptions" id="proptions" class="proptions">
<option value="0" class="default_proptions" id="choose_prompt">Choose your Proptions&#8230;</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>

推荐答案

在change事件中执行它，但仅限于期望值：

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>

这篇关于试图让一个jQuery事件Fire onClick在选择/选项表单上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！