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

我正在创建这样的标记

<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>

现在我的要求是，当我从下拉列表中选择任何内容时，其各自的值应作为一个值。 有人能提出一些建议来实现这一点吗。我本想在更改后执行此操作，但问题是，当我第二次单击下拉列表时，该值将被重新替换

谢谢诸如此类的事

<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>

​ ​

当您使用 $select[name='country'].val；默认情况下，将显示正确的值。For-Select-使用0作为值。

算出了它。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'));
});

​

编辑：

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

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

---

我真的不明白你的问题，尤其是它各自的值应该是一个值看一个正常的行为o/p是印度美国英国现在作为一个正常的用户当我点击印度时，所选的值应该是1在下拉列表中。我想我明白了。当菜单弹出时，您希望看到所有国家的名称，但当用户选择并关闭时，您希望看到数字。是吗？是的，谢谢你的帮助，是这样的，但是当我点击下拉列表时，文本应该没有值。在当前的senario中，如果我选择美国，它将显示2，这是正确的，但当我再次单击下拉菜单时，美国将被2所取代，这不应该被取代。@saorabh，这需要一个黑客解决方案。我试图修改你的小提琴以使用鼠标而不是更改，但该事件似乎不会在选择菜单上触发。这可能需要使用弹出式菜单插件而不是标准插件来完成。@Barmar是的，他应该使用其他解决方案，即使没有触发click。谢谢@undefined的帮助。将尝试在不使用select或自定义select box插件的情况下实现此功能。这不会显示任何内容，它只返回选项值。他想改变菜单关闭时的显示方式。我不明白。你能发布你的输出应该是什么吗。。。

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