使用select2並將事件附加到它

Question

我正在使用一個簡單的select2，其中在選項中我傳遞了一個普通類，並且我需要附加一個事件，該事件在選項中的每個更改或單擊項目時都應觸發一些jquery事件。 我有這樣的代碼：

<select name="transferfrom" id="transferfrom" data-placeholder="Please choose one" data-rel="chosen">
        <option value=""></option>  

            <option class="locDetails" id="1" value="1">Main Store</option>

            <option class="locDetails" id="2" value="2">Branch Store A</option>

            <option class="locDetails" id="3" value="3">Branch Store B</option>

            <option class="locDetails" id="4" value="4">Branch Store C</option>

            <option class="locDetails" id="5" value="5">Branch D</option>

    </select>

如果我看到上面的螢火蟲數據，我會看到他的代碼為：

<div class="controls">
    <div class="select2-container" id="s2id_transferfrom" title=""><a tabindex="-1" class="select2-choice" href="javascript:void(0)">   <span class="select2-chosen" id="select2-chosen-3">Main Store</span><abbr class="select2-search-choice-close"></abbr>   <span role="presentation" class="select2-arrow"><b role="presentation"></b></span></a><label class="select2-offscreen" for="s2id_autogen3"></label><input type="text" role="button" aria-haspopup="true" class="select2-focusser select2-offscreen" aria-labelledby="select2-chosen-3" id="s2id_autogen3"></div><select data-rel="chosen" data-placeholder="Please choose one" id="transferfrom" name="transferfrom" title="" class="select2-offscreen" data-bv-field="transferfrom" tabindex="-1">
        <option value=""></option>  

            <option value="1" id="1" class="locDetails">Main Store</option>

            <option value="2" id="2" class="locDetails">Branch Store A</option>

            <option value="3" id="3" class="locDetails">Branch Store B</option>

            <option value="4" id="4" class="locDetails">Branch Store C</option>

            <option value="5" id="5" class="locDetails">Branch D</option>

    </select><i style="display: none; top: 0px;" class="form-control-feedback" data-bv-icon-for="transferfrom"></i>
    </div>

這是我的jquery事件，我要在更改選項項或單擊選項項時要做的事情

$(document).on('change click','#transferfrom option.locDetails',function() {
        var ID = $(this).val();
        alert(ID);
        $(".reloadtransferform").load('transferfrom.cfm?id='+id+'&cache='+Math.random());
    });

但這確實有效

Answer 1

嘗試以下操作：將更改事件附加到select框而不是option s。

注意 -請確保整個HTML文檔中的transferfrom是唯一ID。

$(document).on('change','#transferfrom .select2-offscreen',function() {
      var ID = $(this).val();
      alert(ID);
      $(".reloadtransferform").load('transferfrom.cfm?id='+id+'&cache='+Math.random());
});

Answer 2

試試這個： FIDDLE

$("#transferfrom").on("change", function(e) { 
    var ID = e.val;
    alert(ID);
    $(".reloadtransferform").load('transferfrom.cfm?id='+ID+'&cache='+Math.random());
})