使用jQuery </select>获取<select>的选定值

时间:2014-06-28 20:28:53

标签: jquery html jquery-selectors html.dropdownlistfor

我正在尝试获取<select>标签的值,这是一项简单的任务。我已经好几次了,但这次看起来没有工作。

我的选择标记如下:

<select id="tshirt['+$(this)[0].id+'][size]" style="width: 55px;" name=tshirt['+$(this)[0].id+'][size]">
    <option value="small">S</option>
    <option value="medium" selected="selected">M</option>
    <option value="large">L</option>
    <option value="xlarge">XL</option>
</select>

我尝试按以下方式检索所选元素

$('#tshirt['+id+'][size] :selected').text()
$('select #tshirt['+id+'][size]').val()
$('#tshirt['+id+'][size]').children("option").filter(":selected").text()

我总是得到未定义或[]""。有关如何解决的任何建议吗?

1 个答案:

答案 0 :(得分:2)

在CSS选择器中,#tshirt[foo]并不意味着“匹配ID为tshirt[foo]的元素。”这意味着“匹配具有&lt;无效条件&gt;”的ID tshirt的元素。< / p>

要避免此问题,请将自己限制为不包含CSS元字符的ID或转义元字符。

$('#tshirt\\['+id+'\\]\\[size\\] :selected')

测试以下内容:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<select id="tshirt[foo][size]" style="width: 55px;" name="tshirt[foo][size]">
    <option value="small">S</option>
    <option value="medium" selected="selected">M</option>
    <option value="large">L</option>
    <option value="xlarge">XL</option>
</select>
<script>
   var id = "foo";
   var rs = $('#tshirt\\['+id+'\\]\\[size\\] :selected');
   alert("size = " + rs.size());
   rs.each(function(i, ele){ alert("value = " + ele.value); });
</script>