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>

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

谢谢

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/

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'));
});

fiddle

编辑：

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

$('.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'));
});

fiddle

Answer 3

使用时默认情况下，$("select[name='country']").val();会显示正确的值。对于 - 选择 - 使用0作为值。

在下拉框中进行选择后显示值

3 个答案: