несколько условий выпадающего списка

Question

Я надеюсь, что кто-то может мне помочь, я новичок в JQuery. Я пытаюсь написать код JQuery для скрипта, который помечает границу выпадающего списка #type, если опция выбрана в #age или если опция в #master изменена.

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

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

};

К сожалению, условие, связанное с изменением, не работает. В качестве обходного пути я мог бы создать 2 разных if для каждого условия, но я бы хотел объединить их в одном выражении if. Как вы думаете, возможно ли это?

Answer 1

Обратите внимание на $('#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)

Answer 2

Вы можете использовать свойство 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>