選擇選項基地

Question

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

我知道我可以做$('select').val('abc')但如果我有什麼這樣的事情

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

如何選擇上idabc基地？

Answer 1

value不是有效的對象。 abc應該用引號括起來。

的<option>應該是

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

可以使用filter()濾除其具有id 123在value屬性類似對象的字符串的<option>元件。

然後，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>