Я пытаюсь выбрать конкретный вариант из с помощью jquery

Question

У меня есть список выбора с 4 вариантами. Что я хочу, так это скрыть кнопку отправки, когда я выбираю первый вариант с value="zero". Когда я выбираю другие параметры «один», «два», «три» .... Я хочу, чтобы отображалась кнопка отправки. Это мой первый раз в программировании, и я не знаю, что делать. Пожалуйста, помогите ... Спасибо !!!!

$('.wizardActionStaRate').change(function() {

  var firstItem = $('select [value="zero"]')

  if ($(firstItem)) {
    $('.starate').hide();
  } else {
    $('.starate').show()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>
<select class="wizardActionStaRate">
  <option value="zero"></option>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>
<div class="buttonsContainer">
  <div class="btn btn-rect rate">
    <p class="numbers">Submit</p>
  </div>
</div>

Answer 1

Вы можете определить опцию selected примерно так:

var theSelection = $(".wizardActionStaRate > option:selected");

Затем вы можете проверить, что в вашей change() функции:

$('.wizardActionStaRate').change(function() {
    var theSelection = $(".wizardActionStaRate > option:selected");
    if ($(theSelection).val() == "zero") {
        $('.btn').hide();
    } else { 
        $('.btn').show();
    }
});

Я предлагаю дать вашей кнопке идентификатор, и таким образом вы сможете скрыть / показать его с большей точностью. Например, чтобы скрыть кнопку с id = dimitris, вы можете использовать $('#dimitris').hide();

Answer 2

Всего несколько изменений:

1. Получение значения с использованием this var. this означает выбранный DOM узел, потому что $('.wizardActionStaRate') выбирает его.
2. Исправить селектор кнопки на .btn starate класс не существует.
3. Запустите изменение, чтобы принудительно запустить код.

$('.wizardActionStaRate')
.change(function() {
  if (this.value === 'zero') {
    $('.btn').hide();
  } else {
    $('.btn').show();
  }
})
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="wizardActionStaRate">
  <option value="zero"></option>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>
<div class="buttonsContainer">
  <div class="btn btn-rect rate">
    <p class="numbers">Submit</p>
  </div>
</div>