Dropdown-Listenanzeige Anders beim Zusammenfassen mit jQuery?

Question

Wie kann ich eine Dropdown-Liste mit US-Bundesstaaten erstellen, beim Erweitern den vollständigen Bundesstaatsnamen anzeigen, aber die Zustandsabkürzung nach Auswahl anzeigen, indem Sie? Auswählen?

Ich dachte daran, jQuery auf Change zu verwenden, aber habe keine Ahnung.

HTML sollte einfach so sein:

<select id="state" name="states"> 
    <option selected disabled>State</option> 
</select> 

JS so sein sollte:

var usStates = [{ name: 'New York', abbr: 'NY'}, 
       { name: 'New Jersey', abbr: 'NJ'}, 
       { name: 'New Mexico', abbr: 'NM'} 
       ]; 

var usStates_len = usStates.length; 

for(var i = 0; i < usStates_len; i++){ 
    var option = document.createElement("option"); 
    option.text = usStates[i].abbr; 
    option.value = i; 
    var select = document.getElementById("state"); 
    select.appendChild(option); 
} 

https://jsfiddle.net/w858up8u/

Answer 1

Sie können es wie folgt tun:

var usStates = [{ 
 
    name: 'New York', 
 
    abbr: 'NY' 
 
}, { 
 
    name: 'New Jersey', 
 
    abbr: 'NJ' 
 
}, { 
 
    name: 'New Mexico', 
 
    abbr: 'NM' 
 
}]; 
 

 
$('#state').mousedown(function() { 
 
    if ($('#state option').length == 1) { 
 
    for (var i = 0; i < usStates.length; i++) { 
 
     $(this).append('<option value="' + usStates[i].abbr + '">' + usStates[i].name + '</option>') 
 
    } 
 
    } else { 
 
    for (var i = 0; i < usStates.length; i++) { 
 
     $('#state option').eq(i + 1).text(usStates[i].name) 
 
    } 
 
    } 
 
}).change(function() { 
 
    $(this).find('option').each(function() { 
 
    $(this).text($(this).val()) 
 
    }) 
 
    console.log(this.value) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="state" name="states"> 
 
    <option selected disabled>State</option> 
 
</select>