时间戳

首页 > 解决方案 > 多个下拉列表条件

javascript - 多个下拉列表条件

问题描述

我希望有人可以帮助我，我是 JQuery 的新手。如果在#age 中选择了一个选项或#master 中的选项已更改，我正在尝试为标记下拉框#type 边框的脚本编写JQuery 代码。

// condition 1 and condition 2
if($('#age :selected').text() !== '' || $('#master').change()) {

// perform the action
  $("#type").css("border","solid 1px red");

};

不幸的是，与更改相关的条件不起作用。作为解决方法，我可以为每个条件创建 2 个不同的 if，但我想在同一个 if 语句中保持在一起。你认为这可能吗？

标签： javascriptjquerydom

解决方案

你应该注意$('#master').change()。因为不检查它的值是否为默认值是没有意义的。另一点是检查值而不是文本会更好。

无论如何，我可以这样做：

HTML

age
<select id="age">
        <option value="">Choose</option>
        <option value="10">10</option>
        <option value="20">20</option>
</select> master
<select id="master">
        <option value="">Choose</option>
        <option value="X">X</option>
        <option value="Y">Y</option>
</select> type
<select id="type">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
</select>

JS

$('#master, #age').change(function(e) {
  changeBorder(e);
});


function changeBorder(e) {

  if ($('#age').val() !== '' || (e.target.id === 'master' && $('#master').val() !== '')) {
    // perform the action
    $("#type").css("border", "solid 1px red");

  } else
    $("#type").css("border", "");

}

在线演示 (jsFiddle)

推荐阅读