如何在美国列表中创建一个下拉列表,展开时显示完整的州名,但是通过选择选择后显示州的缩写?
我当时想在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>