Как написать оператор if, когда указанная опция выбрана в теге select в JQuery

Question

Я хочу иметь в форме оператор if, который не позволит отправлять форму, если выбрано отключенное выделение (заполнитель).Однако я не уверен, как это сделать?

Моя попытка:

if ($("option:selected") == $('#dis')) {
  error_last_name = 'Last Name is required';
  
  $('#error_last_name').text(error_last_name);
  $('#Event_Name').css('border-color', '#cc0000');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Privilege: </label>
  
  <select name="Privilege" id="Privilege" class="dialogin">
    <option id="dis" disabled selected>Select a Privilege:</option>
    <option value="normal">Normal</option>
    <option value="privileged">Privileged</option>
  </select>
  
  <span id="error_last_name" class="text-danger"></span>
</div>

К сожалению, это ничего не делает.Любая помощь приветствуется :) Переменная error_last_name была создана ранее.

Answer 1

Добавьте тег значения в опцию. Используйте строку ниже, чтобы получить значение выбранного параметра. Я использовал событие изменения окна выбора, чтобы показать сообщение.

var getVal = $("#Privilege option:selected").val();

$("#Privilege").change(function(){
  var getVal = $("#Privilege option:selected").val();

  if (getVal == "") {
    alert("empty");
    // your code
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Privilege: </label>
  
  <select name="Privilege" id="Privilege" class="dialogin">
    <option value="" id="dis"  selected>Select a Privilege:</option>
    <option value="normal">Normal</option>
    <option value="privileged">Privileged</option>
  </select>
  
  <span id="error_last_name" class="text-danger"></span>
</div>

Answer 2

Вместо сравнения всего элемента, лучшим способом будет сравнение выбранного значения:

if ($("option:selected").val() === $('#dis').val())

<option value="default" id="dis" disabled selected>Select a Privilege:</option>

Или, если вы хотите сравнить элемент:

if ($("option:selected")[0] === $('#dis')[0])

Answer 3

Вы не можете проверить равенство объектов jQuery с ==.У вас есть две возможности:

• Используя jQuery#is (if ($("option:selected")is($('#dis'))))
• Сравнивая их значение (if ($("option:selected").val() === $('#dis').val()))

Я использовал второй для фрагмента ниже:

if ($("option:selected").val() === $('#dis').val()) {
  error_last_name = 'Last Name is required';

  $('#error_last_name').text(error_last_name);
  $('#Event_Name').css('border-color', '#cc0000');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Privilege: </label>
  
  <select name="Privilege" id="Privilege" class="dialogin">
    <option id="dis" disabled selected>Select a Privilege:</option>
    <option value="normal">Normal</option>
    <option value="privileged">Privileged</option>
  </select>
  
  <span id="error_last_name" class="text-danger"></span>
</div>