jQuery $ (это) когда вернуть что?

Question

У меня есть два элемента div, эти элементы div содержат по одному элементу select.

<div id="signup_dialog">
   <select name="cb_country">
      <option value="0"></option>
   </select>
</div>

<div id="create_dialog">
   <select name="cb_country">
      <option value="0"></option>
   </select>
</div>

Когда я меняю select в каждом элементе div, $(this) возвращает $("#signup_dialog") или $("#create_dialog") (DIVs), но я хочу получить элемент select с $(this).

Другими словами, this является родительским div, а не select.Как я могу получить выборку внутри моего обработчика событий?

Js код:

$("select[name=cb_country]","#signup_dialog,#create_dialog").live("change",function(){
   console.log("element",$(this));
});

Answer 1

$(this) будет ссылаться на любой элемент, вызывающий функцию изменения. Функция не работает только с выбором?

$("select[name=cb_country]").live("change",function(){
   console.log("element",$(this));
});

$(this).val() даст значение выбранной опции.

Answer 2

Чтобы получить выбранное значение <select> с jQuery, вы можете использовать .val () :

$('select').val();

В вашем обработчике событий this - ваш выбор, поэтому вы можете сделать:

$(this).val();
// or
this.options[this.selectedIndex].value;

DEMO

---

Редактировать: Кажется, я пропустил часть делегирования события.

Первый .live () устарел устарел , что означает, что метод может быть удален в любой будущей версии библиотеки, его больше не следует использовать, если вы используете версия jquery выше 1.6.

Вы должны использовать .on () или .delegate () . Кроме того, оба эти новых метода установят правильный this, указывающий на элемент select.

В любом случае, использование e.target обеспечит указание на элемент, вызвавший событие, в нашем случае - на select.

Вот несколько реализаций, использующих различные методы:

$("select[name=cb_country]","#signup_dialog,#create_dialog").live('change', function(e) {
    alert($(e.target).val());
});

$("#signup_dialog,#create_dialog").on('change', 'select[name=cb_country]', function(e) {
    alert($(e.target).val());
});

$("#signup_dialog,#create_dialog").delegate('select[name=cb_country]', 'change', function(e) {
    alert($(e.target).val());
});

Answer 3

Если вы хотите, чтобы текущее выбранное значение , используйте это:

this.options[this.selectedIndex].val;

или если вам действительно нужно использовать дорогие функции jQuery, используйте:

$(this).val();

Answer 4

Может быть, вы ищете это:

$("select[name=cb_country]",$("#signup_dialog,#create_dialog")).live("change",function(){
   console.log("element",$(this));
});

Второй параметр $() должен быть либо элементом DOM, либо объектом Document, либо jQuery, но не селектором.

При таком решении this должен быть выбранным вами элементом.

Answer 5

Вместо использования this используйте event.target.

$("select[name='cb_country']", "#signup_dialog,#create_dialog").live("change",function(event){
   console.log("element",$(event.target));
});

this, похоже, не работает, потому что кажется, что jQuery не любит несколько элементов в качестве контекста. Не знаю почему.

ОБНОВЛЕНИЕ: Кажется, это проблема с live, так как работает нормально:

$("select[name='cb_country']", "#signup_dialog,#create_dialog").change(function(){
   console.log("element",$(this));
});

Если вы используете jQuery> = 1.7, замените .live на .on.

$("#signup_dialog,#create_dialog").on("change", "select[name='cb_country']", function(){
       console.log("element",$(this));
});

Если вы используете jQuery> = 1.4.3 и jQuery <= 1.7, тогда используйте <code>.delegate (я предлагаю обновить до 1.7.1 и .on):

$("#signup_dialog,#create_dialog").delegate("select[name='cb_country']", "change", function(){
       console.log("element",$(this));
});

ПРИМЕЧАНИЕ: если элементы добавляются через AJAX, вы должны использовать .on следующим образом:

$(document).on("change", "#signup_dialog select[name='cb_country'],#create_dialog select[name='cb_country']", function(){
    console.log("element",$(this));
});