javascript - 在下拉框中进行选择后显示一个值

Question

我正在创建这样的标记

<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<option value="1">India</option>
<option value="2">United States</option>
<option value="3">United Kingdom</option>
</select>

现在我的要求是当我从下拉列表中选择任何内容时，其各自的值应该是一个值。任何人都可以提出一些如何实现这一目标的建议。我正在考虑这样做 onChange 但问题是当我第二次单击下拉列表时，该值将被重新替换。

谢谢

Answer 1

像这样的东西？

<select name="country" class="country">
   <option selected="selected">--Select Country--</option>
   <option value="1" data-text='india'>India</option>
   <option value="2" data-text='United States'>United States</option>
   <option value="3" data-text='United Kingdom'>United Kingdom</option>
</select>

$('.country').change(function(){
    $('option', this).text(function(){
       return this.dataset.text
    })
    $(':selected', this).text(this.selectedIndex)
})

​http://jsfiddle.net/aVBKq/ ​</p>

Answer 2

弄清楚了。mouseup不工作，但是mousedown！而且我的解决方案也不需要你写两次国家名称。

$('.country').change(function() {
    var selected = $(':selected', this);
    var index = this.selectedIndex;
    if (index) {
        selected.data('savedtext', selected.text()).text(index);
    }
});
$('.country').mousedown(function() {
    $(':selected', this).text($(':selected', this).data('savedtext'));
});

​<a href="http://jsfiddle.net/barmar/aVBKq/3/" rel="nofollow">小提琴

编辑：

这是显示选项值而不是索引的另一个版本：

$('.country').change(function() {
    var selected = $(':selected', this);
    var value = selected.val();
    if (value) {
        selected.data('savedtext', selected.text()).text(value);
    }
});
$('.country').mousedown(function() {
    $(':selected', this).text($(':selected', this).data('savedtext'));
});​

小提琴

Answer 3

当您 $("select[name='country']").val();默认使用时，将显示正确的值。对于 --Select-- 使用 0 作为值。