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

那么，如何显示变量名和变量id？ THX ..

Answer 1

因此，将<span>放在选项中实际上违反了HTML规范（It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?），因此根据用户的浏览器，dom中甚至可能不存在跨度（替换为包含跨度内容的文本类型节点。

你可能想要使用类似的东西

$(".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/

如何使用jquery在选择框选项中获取类的值

1 个答案: