2014-12-12 3 views
0

Я использую простой select2, где в параметрах я передаю общий класс, и мне нужно прикрепить событие, которое при каждом изменении или щелчке элемента в опции должно вызвать некоторый jquery мероприятие. У меня есть код вроде этого:using select2 и прикрепление к нему события

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

, но это, кажется, работает

+0

вы используете ** выбрали выберите Jquery ** я правильно? –

+0

не выбрано, select2 – Jumper

+0

Почему вы не можете использовать: - $ ('select'). Select2() .on ("change", function (e) { // В основном используется событие, запущенное в исходный элемент, когда значение изменения }) – Alok

ответ

0

Попробуйте это: прикрепить событие изменения в select коробка вместо option s.

ПРИМЕЧАНИЕ - Убедитесь, что transferfrom является уникальным идентификатором в документе html.

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

Попробуйте это: FIDDLE

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

Всегда лучше использовать $ (someParent) .on ('change', 'changeElement', function() {}); а не то, что вы использовали .. потому что в случае, если changeElement перерисовывается в DOM, ваше событие получится unbinded, однако тот, который написал Bhushan, сохранит событие – Alok

+0

** Я знаю это уже **. То, что я написал, является частью документации плагина 'select2'. Вот как разработчик предлагает использовать событие изменения. Сначала вы должны прочитать эту документацию. –

+0

cool then .. Я использовал select2 от длинной спины. Я уже прочитал документацию. – Alok

Смежные вопросы