jquery - Jquery 和 change() 有超过 1 个函数？

Question

我正在尝试找到在更改选择框时发生不同功能的最佳方法。

这是我选择的 HTML

<select name="event-recurring">
<option selected="true">None</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
</select>

我的jQuery是：

$('select[name=event-recurring] option:selected').change (function (){
//Will Do Something
});

我如何告诉它在不同的值上做不同的事情？

解决方案：

$('#event-recurring').change(function (){
    var $select = $(this);

    switch($select.val()) {
        case "daily":
           $('#recurring-options').remove();
           $("<div id='recurring-options' class='row'><label>Choose:</label>Choose a Date</div>").insertAfter('#recurring');
            break;
        case "weekly" :
        $('#recurring-options').remove();
              $("<div id='recurring-options' class='row'><label>Choose:</label>Weekly</div>").insertAfter('#recurring');
            break;
        case "monthly":
        $('#recurring-options').remove();
           $("<div id='recurring-options' class='row'><label>Choose:</label>Monthly</div>").insertAfter('#recurring');
            break;
        default:
            $('#recurring-options').remove();
            break;
    }    
});

Answer 1

$('select[name=event-recurring]').change (function (){
    var $select = $(this);

    switch($select.val()) {
        case "daily":
            // do something
            break;
        case "weekly" :
            // do something else
            break;
        default:
            // default case
            break;
    }    
});

我建议<select>也提供一个 id 并使用它来选择它，因为它会比名称更快

Answer 2

很确定这将在 change 函数中起作用：

$('select[name=event-recurring]').change (function (){
    switch ($('option:selected', this).val()) {
      case "daily":
        // do something
        break;
      case "weekly":
        // do something
        break;
      case "monthly":
        // do something
        break;
    }
});

Answer 3

你的意思是对不同的选择值做不同的事情吗？

如果是这样，我相信您可以在函数中使用“this”对象来引用事件的来源（在本例中为 select），您可以使用“.val()”或“.text()”来检查它的值查看它的价值并相应地进行处理。

希望这可以帮助。

Answer 4

对所选值使用子查询并将其 value 属性作为您操作的鉴别器：

$('select[name=event-recurring]').change( function() {
    var value = $(this).find(':selected').attr('value');
    if (!value) { // none
        do something
    }
    else if (value == 'daily') {
        do something else
    }
    ...
});