Wählen Sie eine Option basierend auf dem Wert ihres Datenattributs

Ich möchte (aka jquery preselect) wählen und den Wert basierend auf Datenvariablen festlegen. Die Liste hat 3 Einträge mit gleichen Werten, aber unterschiedlichen Daten-d.Wählen Sie eine Option basierend auf dem Wert ihres Datenattributs

Angenommen, ich habe Variable selectvar = "d", dann sollte es zu 2 Element in der Liste ändern.

 <select id="select2"> 
    <option data-id="mo" value="1" style="display: none;">1</option> 
    <option data-id="d" value="1" style="">one</option> 
    <option data-id="h" value="1" style="display: none;">o-ne</option> 
    <option data-id="mo" value="2" style="display: none;">2</option> 
    <option data-id="d" value="2" style="">two</option> 
    <option data-id="h" value="2" style="display: none;">t-wo</option> 
    <option data-id="mo" value="3" style="display: none;">3</option> 
    <option data-id="d" value="3" style="">three</option> 
    <option data-id="h" value="3" style="display: none;">t-hree</option> 
    </select> 

val = 2 
selectvar="d" 
$("#select2 option[data-id='d'][value='2']").prop("selected", true);

Quelle

2017-04-08 Code Guy

Was ist die Bedeutung von _then sollte es zu 2 Artikel in der Liste ändern _ ??? –

Es gibt 3 Elemente, die alle denselben Wert haben. Aber Text ist anders. Es gibt auch eine Variable selectvar. Abhängig vom Wert von selectvar select müssen wir wählen, welches von 1 oder one oder o-ne.In Beispiel selectvar hat "d" das ist, warum nach dem Ausführen des Codes sollte es wählen, aber nicht 1 oder o-ne. Was sollte der richtige Code sein? –

Verwenden Sie den folgenden Code und geben ID zu Ihrem wählen.

$("#select2 option[data-id='" + selectvar + "']").prop("selected", true);

Quelle

2017-04-08 02:49:42

@CodeGuy Ich habe gerade den Code aktualisiert. –

Früher habe ich etwas anderes verstanden. Das funktioniert gut. Ich habe es versucht. –

@CodeGuy akzeptieren Sie die Antwort, wenn es für Sie in Ordnung ist. –

die ausgewählte Variable Set - dann teh Auswahlliste Optionen iterieren und das Datenattribut vergleichen - es ist der gleiche - Satz ausgewählte Eigenschaft.

var selectvar = "d"; 
 

 

 
$("#select2 option").each(function(){ 
 
    var id= $(this).attr('data-id'); 
 
    if(id === selectvar){ 
 
     $(this).prop('selected',true); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select2"> 
 
    <option data-id="mo" value="1">1</option> 
 
    <option data-id="d" value="2" >one</option> 
 
    <option data-id="h" value="3">o-ne</option> 
 
</select>

Quelle

2017-04-08 02:46:18 gavgrif

Danke, ein beliebiger Code möglich? –

$("button").click(function() { 
 
    var selectVal = $("input").val(); 
 
    
 
    $('[data-id="' + selectVal + '"]').prop("selected", true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option data-id="mo" value="1" style="display: none;">1</option> 
 
    <option data-id="d" value="1" style="">one</option> 
 
    <option data-id="h" value="1">o-ne</option> 
 
</select> 
 
Data-id:<input/> <button>Change</button>

Quelle

2017-04-08 02:47:11

Wählen Sie eine Option basierend auf dem Wert ihres Datenattributs

Antwort

Verwandte Themen