尝试在选择/选项表单上获取一个jQuery事件到Fire onClick

Question

我有一个表单,其中一个字段是一个选择字段,有5个选项.单击第5个选项时,我希望显示隐藏的div.我希望没有任何事情发生,其他4点击.

它适用于FireFox,但没有其他地方.经过一番研究后,似乎Chrome/IE不允许你用select进行onClick解雇.到目前为止,所有的建议都是在整个Select上使用onChange,但是当使用onChange单击第5个选项时,我无法解决这个问题.任何帮助,将不胜感激.

自定义提议设置为display:none; 默认情况下.我希望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&#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>

Answer 1

在更改事件中执行此操作,但仅适用于所需的值:

<script>
    $('#proptions').change(function() {
        if ($(this).find(':selected').val() === '5') {
            $('div#custom_proptions').slideDown('slow');
        } else {
            $('div#custom_proptions').slideUp('slow');
        }
    });
</script>