使用select2并将事件附加到它

时间:2014-12-12 10:03:04

标签: javascript jquery

我正在使用一个简单的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>

如果我看到上面的firebug数据,我看到他的代码为:

<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());
    });

但似乎确实有效

2 个答案:

答案 0 :(得分:0)

试试这个:将更改事件附加到select框而不是option s。

注意 - 请确保{h}文档中transferfrom是唯一ID。

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

答案 1 :(得分:0)

试试这个:FIDDLE

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