Оповещение выбранной опции появляется повторно

Question

alert работает впервые. Однако, когда я снова изменяю option (без обновления страницы), он предупреждает обе опции, ie. первая выбранная опция и вторая выбранная опция тоже.

Я хочу получить значение только выбранной опции, когда нажимаю на кнопку. Кто-нибудь может подсказать мне, как мне этого добиться.

$(document).ready(function() {
  $(".test").change(function() {
    var value = $(this).val();
    $('.button').click(function() {
      alert(value);
    });
  });
  $(".test").change(function() {
    var value = $(this).val();
    $('.button2').click(function() {
      alert(value);
    });
  });
});

<select class="test">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button class="button" value="button">button</button>
<button class="button2" value="button2">button2</button>

Вы можете проверить мой код, указав ниже URL

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_change_ref

Answer 1

Вам необходимо привязать обработчик щелчков немедленно и только один раз, а не при каждом изменении ввода, поскольку тогда вы накапливаете все эти обработчики щелчков ... что приводит к увеличению количества предупреждений:

$(document).ready(function(){
    var value; // scope of variable must include both handlers
    $(".test").change(function(){
        value = $(this).val();
    }).change(); // let it execute also immediately
    $('.button').click(function(){
        alert(value);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<button class="button" value="button">button</button>

Конечно, можно просто сделать alert($(".test").val()), полностью забыть о обработчике change и просто сохранить обработчик щелчков.

Answer 2

Используйте метод .off (), метод удаляет обработчики событий, которые были присоединены с помощью .on ().

$(document).off().on('click', '.button', function() {

$(document).ready(function() {
  $(".test").change(function() {
    var value = $(this).val();
    //$('.button').click(function() {
    $(document).off().on('click', '.button, .button2', function() {
      alert(value);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="test">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button class="button" value="button">button</button>
<button class="button2" value="button2">button2</button>

Answer 3

$(document).ready(function(){

$(".test").change(function() {
       alert($(this).find(":selected").val())
    })
})

Answer 4

попробуйте это:

var value = '';
  $(document).ready(function(){

  });

  $(document).on('change', '.test', function(){
      value = $(this).val();
    });

   $(document).on('click', '.button', function(){
      alert(value);
  });

Answer 5

<script>
$(document).ready(function(){
  var value;
  $(".test").change(function(){
    value = $(this).val();
  });
  $('.button').click(function(){
      alert(value);
  });
});
</script>

<select class="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<button class="button" value="button">button</button>

По предложению @ Rory