javascript - 根据值中的属性键选择选项

Question

<option value="abc">abc</option>

我知道我可以做 $('select').val('abc') 但如果我有这样的事情怎么办

<option value='{"name":abc,"id":123}'>abc</option>

如何根据id选择abc？

Answer 1

value不是有效的对象。 abc应该用引号引起来。

<option>应该是

<option value='{"name":"abc","id":123}'>abc</option>
                       ^   ^

您可以使用 filter() 过滤掉 <option>具有 id 的元素作为 value 中的 123属性对象类字符串。

然后， prop('selected', true) 可用于过滤后的 option设置为选中的选项。

Demo:

// 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有commented , 而不是使用对象作为值，我建议使用 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>