【问题标题】:Trying to get a jQuery event to Fire onClick on a select/option form试图让 jQuery 事件在选择/选项表单上触发 onClick
【发布时间】:2011-09-26 07:12:47
【问题描述】:

我有一个表单,其中一个字段是一个选择字段,有 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>

【问题讨论】:

    标签: jquery forms


    【解决方案1】:

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

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

    【讨论】:

    • 谢谢!这非常有效,这正是我想要弄清楚的。
    【解决方案2】:

    clicked 在这里不是正确的事件。您应该使用change。当事件被触发时,您检查它的 id/class(或者更好的是,在您的情况下的值)并在必要时显示 div。

    【讨论】:

      【解决方案3】:

      尝试使用

       $("selector").live('click',function(){
      });
      

      我的运气要好得多。

      【讨论】:

      • 还有很多现场活动。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-06-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-03-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多