在 jquery 中显示选择字段的值答案

【问题标题】：display the value of a select field in jquery在 jquery 中显示选择字段的值
【发布时间】：2014-05-14 11:49:40
【问题描述】：

我有一个带有select field. 的表格当用户选择value时，我想display this value。

html 是：

<select name="number" id="number">
        <option value="1">2</option>
        <option value="2">4</option>
</select>

<div id="test">2</div>

jquery 是

$(function() {
    $('#number').change(function() {
        var test = $('#test');
        if($('select[name="number"]').val() == '4'){
            test.html('select 4');
        }else{
            test.html('select 2');
        }
    });    
});

它只是为第一个选择工作（虽然值错误）然后它不想工作。

这里是一个 jsFiddle：http://jsfiddle.net/tomlazada/4sRmG/

【问题讨论】：

标签： jquery forms select

【解决方案1】：

你没有任何价值4的选项

if($('select[name="number"]').val() == '4'){

改成

Fiddle Demo

if($('select[name="number"]').val() == '2'){

问题

<option value="2">4</option>
//             ^ value is 2 not 4

或者

Fiddle Demo

如果你想用选项的文本来做

if ($('select[name="number"] option:selected').text() == '4')

【讨论】：

【解决方案2】：

尝试低于它的工作正常。你写了很多不必要的代码

$('#number').change(function(){
    $('#test').html('Selected: ' + $('#number').val());
});

【讨论】：

【解决方案3】：

您将<option>（即4）中的文本与<option>（即2）的值混淆了。

要解决您的问题，请执行 1 of 3：

1)。将您的 html 更改为（因此选项将具有值 4，而不仅仅是内部文本 4）：

<option value="1">2</option>
<option value="4">4</option>

2)。或您的 jQuery 代码（因此您选择值为 2 的选项）：

if($('select[name="number"]').val() == '2'){

3)。或您的 jQuery 代码（最好不要通过文本检查，但如果您想保持 html“原样”并出于某种原因仍使用 4）：

if($('select[name="number"] option:selected').text() == '4'){

另外，正如 @Dinu 提到的，考虑更短的符号。

【讨论】：