根据属性键在值中选择选项

Question

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

我知道可以使用$('select').val('abc')，但如果我有以下情况怎么办

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

如何基于 id 选择 abc？

- Jennifer

---

你需要循环遍历选项并设置选中属性。 - Arun P Johny

不要将“对象”作为“值”保留，而是使用“data-name”和“data-id”属性。并使用 $（'option [“data-id = 123”]')。 - Rayon

Answer 1

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>

- Tushar