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

Jennifer 发表于 Dev

珍妮佛

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

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

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

如何选择abc基于id？

杜沙尔

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

该<option>应

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

您可以使用filter()来过滤出像对象一样的属性字符串<option>中带有idas 123的元素value。

然后，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所评论的那样，我建议您不要使用object作为值，而建议使用HTML5data-*自定义属性来将数据存储在element上。

$('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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。