jQuery zur Auswahl bestimmter Selektionen, die in der Option

Question

"ausgewählt" haben Ich habe ein Formular mit mehreren Auswahlmöglichkeiten, die dynamisch mit Optionen vorbelegt ist.

Ich möchte markieren (Hintergrundfarbe ändern) nur für wählt, die in der Optionsliste "ausgewählt" haben.

Form:

<form name="MyForm" method="POST" action="/myaction"> 
    <select> 
     <option value="--">--</option> 
     <option value="1">111</option> 
     <option value="2" selected>222</option> 
     <option value="3">333</option> 
    </select> 

    <select> 
     <option value="--">--</option> 
     <option value="1">A1</option> 
     <option value="2">B2</option> 
     <option value="3">C3</option> 
    </select> 

    <select> 
     <option value="--">--</option> 
     <option value="A" selected>AAA</option> 
     <option value="B">BBB</option> 
     <option value="C">CCC</option> 
    </select> 
</form> 

Meine aktuellen jQuery hebt alle der wählt, nicht nur diejenigen, die „ausgewählt“ in Optionen haben. In dem obigen Beispiel nur die erste und letzte wählt hervorgehoben werden sollte ...

$('#MyForm').find('select > option:selected').parent().css('background-color', 'rgba(216,255,1,0.15)'); 

Irgendeine Idee, wie man es beheben?

Answer 1

sehen aus wie Sie suchen für das Attribut selected:

$('[name=MyForm] [selected]').parent().css('background-color', 'rgba(216,255,1,0.15)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="MyForm" method="POST" action="/myaction"> 
 
    <select> 
 
     <option value="--">--</option> 
 
     <option value="1">111</option> 
 
     <option value="2" selected>222</option> 
 
     <option value="3">333</option> 
 
    </select> 
 

 
    <select> 
 
     <option value="--">--</option> 
 
     <option value="1">A1</option> 
 
     <option value="2">B2</option> 
 
     <option value="3">C3</option> 
 
    </select> 
 

 
    <select> 
 
     <option value="--">--</option> 
 
     <option value="A" selected>AAA</option> 
 
     <option value="B">BBB</option> 
 
     <option value="C">CCC</option> 
 
    </select> 
 
</form>

Answer 2

Sie verwenden Formularelement mit name="MyForm" sondern 'MyForm' in jquery als id-Selektor $('#MyForm'). Either assign id = "MyForm" `in dem Formular-Tag oder die unter Verwendung verwenden jquery

$('[name="MyForm"]').find('select > option:selected').parent().css('background-color', 'rgba(216,255,1,0.15)'); 

Answer 3

var selectedItems= $('[name="MyForm"]').find('select > option:selected');  
selectedItems.each(function(obj,ind){  
    $(obj).parent().css('background-color', 'rgba(216,255,1,0.15)'); 
}); 

Answer 4

Dies ist ziemlich einfach. Ersetzen Sie option:selected durch option[selected], und fügen Sie dem Formular das Attribut id="MyForm" hinzu.

Sie können den Code in diesem fiddle sehen.