Question

我使用jQuery动态创建select元素的选项。是否可以在jQuery中设置一个在选择该选项时执行的函数？

我知道我可以检测整个select元素的变化，但是可以在每个选项的基础上指定它吗？也许是这样的：

$('<option />').onselect(function(){

 // do something

});

编辑：如果在选择特定选项时无法指定获取执行的函数，是否可以将函数绑定到jQuery中的元素？它允许我只是简单地执行分配给.change中选项的函数来使我的逻辑更清晰。

Answer 1

您可以将change事件委派给文档，并将事件处理程序附加到select元素。这允许运行时操作：

$(document).on('change', 'select', function() {
    console.log($(this).val()); // the selected options’s value

    // if you want to do stuff based on the OPTION element:
    var opt = $(this).find('option:selected')[0];
    // use switch or if/else etc.
});

或者如果你坚持为每个OPTION创建功能，你可以这样做：

$('<option>').data('onselect', function() {
    alert('I’m selected');
});

$(document).on('change', 'select', function(e) {
    var selected = $(this).find('option:selected'),
        handler = selected.data('onselect');
    if ( typeof handler == 'function' ) {
        handler.call(selected, e);
    }
});

Answer 2

您可以使用onchange处理程序来选择：

<select name='numbers' id='numbers'>
<option value='1' selected='selected'>One</option>
<option value='2'>two</option>
<option value='3'>three</option>
<option value='4'>four</option>
</select>



<script>
  $('#numbers').change(function(){ 
    if($(this).val() == 1){
      function1();
    }
    if($(this).val() == 2){
      function2();
    }

});
</script>

最好的问候

Answer 3

您可以尝试绑定change()元素本身上的select事件。从那里开始，假设每个选项都有一个有效的函数，你可以调用单个选项的回调：

$('select').change(function() {
  var type = $(this).val();
  switch(type) {
  }

  // Alternatively, you can try this as well:
  $(this).find('option:selected').each(function() {
  });
});

Answer 4

如果您要为每个选项元素分配单独的功能，可以执行以下操作：

var options = [{"value" : "1",
                "display" : "One",
                "fn" : function() { console.log("One clicked"); }
               },
               {"value" : "2",
                "display" : "Two",
                "fn" : function() { console.log($(this).val() +  " clicked"); }
               }];

var $select = $("select").on("change", function() {
    var opt = this.options[this.selectedIndex];
    $(opt).data("fn").call(opt);
});

$.each(options, function(i, val) {
    $select.append(
        $("<option/>").attr("value", val.value)
                      .text(val.display)
                      .data("fn", val.fn)
    );
});

演示：http://jsfiddle.net/6H6cu/

这实际上使用jQuery的.data()方法将函数附加到每个选项，然后在select元素上的click / keyup上调用相应的选项函数（将this设置为选项）。

在我看来，这样做有点矫枉过正，但它似乎就是你所要求的。

我想更简单的版本会是这样的：

var optionFunctions = {
   "1" : function() { ... },
   "2" : function() { ... },
   ...
};

// code to create the options omitted

$("select").on("change", function() {
    var fn = optionFunctions[$(this).val()];
    if (fn)
       fn.call(this.options[this.selectedIndex]);
});

从选项对象中选择选项时，jQuery执行函数

4 个答案: