选择选项只返回一个选项答案

【问题标题】：Select option is returning only one option选择选项只返回一个选项
【发布时间】：2015-09-18 03:57:00
【问题描述】：

我有一个选择选项，有两种颜色，红色和蓝色。当我选择红色时，它应该将背景颜色设置为红色，如果我选择蓝色，它应该将背景颜色设置为蓝色。问题是无论我选择什么，它都会将背景颜色设置为红色。

<select id ="selectColor">
    <option >none</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>

$(document).ready(function () {
    $("#selectColor").change(function () {
        if ($(this).text != "red") {
            document.body.style.backgroundColor = "blue";
        }
        if ($(this).text !="blue")
         {
          document.body.style.backgroundColor = "red";
         }
    });
});

【问题讨论】：

试试$(this).text()...
我试过了还是一样的问题
我认为没有必要否决这个问题。

标签： javascript jquery

【解决方案1】：

有最短最简单的例子：

<select onchange="javascript:document.body.style.backgroundColor=this.value;">
    <option >none</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>

【讨论】：

【解决方案2】：

实际上，它首先将背景设置为蓝色，然后设置为红色，因为$(this).text 不等于两者。很可能是undefined。

您正在寻找.val() 方法，以提取value 属性。

$(document).on('ready', function () {
  $("#selectColor").on('change', function () {
    var val = $(this).val();
    
    document.body.style.backgroundColor = val;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="selectColor">
    <option value="">none</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>

【讨论】：

【解决方案3】：

你的 javascript 应该是这样的：

$(document).ready(function () {
$("#selectColor").change(function () {
    if ($(this).val() != "red") {
        document.body.style.backgroundColor = "blue";
    }
    else if ($(this).val() !="blue")
        {
        document.body.style.backgroundColor = "red";
    }
});
});

使用 val() 可以获得选项的值。如果您使用“文本”，您将获得所有选项的所有文本，以及您的 if 中断

【讨论】：

【解决方案4】：

jQuery 对象上的text 属性将始终是一个函数。它永远不会是您正在测试的任何一个刺痛，因此您的所有条件都将匹配。颜色将变为蓝色，然后立即变为红色。

您想使用val() 而不是text。

【讨论】：

【解决方案5】：

这是一个使用 jQuery 的示例：-

$(document).ready(function () { 
    $("#selectColor").change(function () {
        if ($(this).val() === "red") {
            $('body').css('background-color', 'blue');
        } else {
            $('body').css('background-color', 'red');
        }
    });

以这个 JS Fiddle 为例 - EXAMPLE });

【讨论】：

【解决方案6】：

使用 val() 代替 text();

$(document).ready(function () {
$("#selectColor").change(function () {
    console.log($(this).val());
    if ($(this).val() != "red") {
        document.body.style.backgroundColor = "blue";
    }
     if ($(this).val() !="blue")
        {
        document.body.style.backgroundColor = "red";
    }
});
});

DEMO

【讨论】：

太好了，您解决了问题，但是为什么可以解决问题？ ;)
我已经更新了答案，对于一个小小的改动，我想提问者可以看看为什么使用 val 而不是 text...