如何在美国列表中创建一个下拉列表,展开时显示完整的州名,但是通过选择选择后显示州的缩写?

我当时想在Change上使用jQuery,但没有任何线索。

HTML应该像这样:

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


JS应该是这样的:

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/

最佳答案

您可以这样做:



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>

07-24 09:47
查看更多