在选择选项上绑定点击事件

时间:2012-09-05 05:45:55

标签: jquery

我在HTML click元素上发生option事件时遇到问题。

即使是简单的console.log('hello!');也行不通。

我正在尝试这个:

$('#mySelect option').bind('click', function(){
  console.log('hi!');
});

它工作了一段时间,但后来停了下来。

7 个答案:

答案 0 :(得分:16)

在我的情况下,代码工作

$('#myItem').change(function(){
            //do somthing
})

答案 1 :(得分:3)

您可以通过提供.on() ID使用<select>进行绑定。通常,change<select>上调用的事件。

因此,绑定事件时无需提及option

$(document).on('change','#mySelect', function(){<br>
    console.log('hi!');
});

$('#mySelect').bind('change',function(){<br>
    console.log('hi!');
});

答案 2 :(得分:2)

检查这个js小提琴 -

http://jsfiddle.net/4W826/

<强> HTML

<select id="mySelect">
               <option value="volvo">Volvo</option>
               <option value="saab">Saab</option>
               <option value="mercedes">Mercedes</option>
               <option value="audi">Audi</option>
       </select>  

JQUERY

$('#mySelect').bind('click', function(){
alert('hi!');
});

Click更改为Change

答案 3 :(得分:2)

示例将显示如何在单击或更改选择

时更改OPTION的下拉值和颜色

HTML:

<select name="options">
      <option value="1">Red</option>
      <option value="2" selected="1">Green</option>
      <option value="3">Blue</option>
</select>

jQuery的:

$("select").on("click", function () {
    debugger;
    var sVal = $(this).val();
    $(this).css("background-color", "red");
    $(this).find("option").css("background", "white");
    $(this).find('option:selected').css("background-color", "red");
    $("input").val($(this).val());
});

Demo

答案 4 :(得分:1)

这解决了这种情况 - 根据我的需要(在点击我页面上的某些select元素时捕获事件)。虽然没有验证触摸行为,但Firefox,Chrome似乎没关系

$('.class_for_select').focus(function() {
    // do something here
});

答案 5 :(得分:0)

我建议您使用.on()而不是.bind()。

$('#mySelect').on('change', function(){
  var $this = $(this),
      $value = $this.val();

  alert($value);

});

jsFiddle

答案 6 :(得分:0)

因为改变对我来说不够好而且我没有找到触发选项的方法点击我所做的是

 $('#mySelect').click(function () {
        if ($(this).attr('optionclick') == '1') {
             $(this).attr('optionclick', '0');
        }
        else {
             $(this).attr('optionclick', '1');
        }
  });