<option value="abc">abc</option>
我知道可以使用$('select').val('abc')
,但如果我有以下情况怎么办
<option value='{"name":abc,"id":123}'>abc</option>
如何基于 id
选择 abc
?
<option value="abc">abc</option>
我知道可以使用$('select').val('abc')
,但如果我有以下情况怎么办
<option value='{"name":abc,"id":123}'>abc</option>
如何基于 id
选择 abc
?
value
不是一个有效的对象。应该用引号包裹 abc
。
<option>
应该是
<option value='{"name":"abc","id":123}'>abc</option>
^ ^
您可以使用filter()
来过滤掉<option>
元素,这些元素在value
属性对象字符串中具有id
为123。
然后,prop('selected', true)
可以用于筛选出的option
,将其设置为选定选项。
// Filtering all options in the select
$('select option').filter(function() {
var val = $(this).val(), // Get value
obj = {};
// Try to parse the string to JSON
try {
obj = JSON.parse(val);
} catch (e) {
obj = {}; // Empty object if parsing fails
}
// Filter based on the `id` in the value
return obj.id === 123;
}).prop('selected', true); // Set the option as selected
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="Hello">fdsafds</option>
<option value='{"name":"abc","id":123}'>abc</option>
</select>
Rayon提出的观点是,建议使用HTML5的data-*
自定义属性来存储元素上的数据,而不是将对象用作值。
$('option[data-id="123"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select>
<option value="Hello" data-name="bond" data-id="007">fdsafds</option>
<option value="something" data-name="abc" data-id="123">abc</option>
</select>
$('option [“data-id = 123”]')
。 - Rayon