Question

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

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

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

};

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

Answer 1

如果发生更改事件，可以使用dataset属性进行保存。因此，您可以针对以下属性进行测试：

// add a listener to handle changes on dropdowns
$('#age, #master').on('change', function(e) {
    this.dataset.changed = true;
    if ($('#age').data('changed') == true && $('#master').data('changed') == true) {
        $("#type").css("border","solid 1px red");
        // reset....
        $('#age').data('changed', false);
        $('#master').data('changed', false);
    } else {
        $("#type").css("border","");
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="age">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>
<select id="master">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>
<select id="type">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

Answer 2

您应注意$('#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", "");

}

Online demo (jsFiddle)

多个下拉列表条件

2 个答案: