как получить значение класса в опции выбора коробки с JQuery

Question

мой код:

<select class='country'> 
    <option value='usa'><span class='nameCountry'>America</span> <span class='idCountry'>1</span></option> 
    <option value='sgd'><span class='nameCountry'>Singapura</span> <span class='idCountry'>2</span></option> 
    <option value='thi'><span class='nameCountry'>Thailand</span> <span class='idCountry'>3</span></option> 
</select> 

<div class="result"> 
    <input type="text" name="kodeCountry" /> 
    <input type="text" name="idCountry" /> 
    <input type="text" name="nameCountry" /> 
</div> 

вот мой JQuery код:

$(".country").change(function(){ 
    var kode = $(this).val(); 
    var name = $(".country option .nameCountry").html(); 
    var id = $(".country option .idCountry").html(); 
    console.log(kode); 
    console.log(name); 
    console.log(id); 
}); 

результат в консоли:

name and id = undefined 

Итак, как отобразить имя переменной и идентификатор переменной? Thx ..

Answer 1

Таким образом, поставив <span> внутри вариант фактически нарушает HTML спецификации (It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?), поэтому в зависимости от браузера пользователя, пролеты не может даже присутствовать в йот (заменен вместо с текстом типа узел, содержащий содержимое пролетов).

Вы, вероятно, захотите использовать что-то вроде этого вместо

$(".country").on('change', function(e){ 
    var kode = $(this).val(); 
    var $selected = $('option:selected', this); 
    var parts = $selected.text().split(/\W+/); 
    var name = parts[0] 
    var id = parts[1] 
    console.log(kode); 
    console.log(name); 
    console.log(id); 
}); 

скрипка: http://jsfiddle.net/9nn1rune/