Wählen Sie die Option Base auf Eigenschaftsschlüssel in Wert

Question

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

Ich weiß, ich $('select').val('abc') tun kann, aber was, wenn ich so etwas wie dieses

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

Wie wähle ich abc Basis auf id?

Answer 1

Die value ist kein gültiges Objekt. abc sollte in Anführungszeichen eingeschlossen werden.

Die <option> sollte

sein

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

filter() Sie können die <option> Elemente herauszufiltern, die die id als 123 in dem Attributobjekt value artigen String haben.

Dann prop('selected', true) kann auf die gefilterten option als ausgewählte Option verwendet werden.

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>

---

Als Rayoncommented hat, stattdessen Objekt als Wert verwendet wird, werde ich empfehlen HTML5 zu verwenden data-* benutzerdefinierte Attribute auf Elementdaten zu speichern.

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