onchange選擇選項不起作用

Question

伙計們，這是我的腳本，可以在更改時獲取所選選項的值，但不能按預期工作。 關於選項更改，我想獲取所選選項的值，但它返回所有以前的值和當前值。為什么？

<div id="dropdown" style="height: 30px;width: 100%;text-align: center;">
Select website url:
<select name="selectsite"  id="selectsite" style="border-radius: 5px; width: 300px;">
            <option value="0">site1</option>
            <option value="1">site2</option>
            <option value="2">site3</option>
</select>
</div>
<br />
<button id="start" type="button">Start</button>
<button id="pause" type="button">Pause</button>

<script type="text/javascript">
 $(document).ready(function () {

  var selectval = $('#selectsite').val(); //get value of select option

 //when first option is selected which is by default
  if(selectval == 0) {
    var selval = 0;
    var injsArray = $.parseJSON('<?php echo json_encode($data); ?>');
    var data = injsArray[selval]['dat']; //load the data
    $('#start').on('click',function(){
            playthis(selval, data); 
    });
  }

  $('#selectsite').on('change',function(e) {
   var selval = $(this).val();
   var injsArray = $.parseJSON('<?php echo json_encode($data); ?>');
   var hdata = injsArray[selval]['dat']; //load the data

    $('#start').on('click',function(){
            playthis(selval,hdata); 
    });   
  });

  function playthis(value,data){
    console.log("Selected option value is "+value);
  }

});
</script>

如何解決這個問題呢？ 因為我是編程新手，所以請建議我是否做錯了什么。 提前致謝

Answer 1

每次調用更改處理程序時，您都在注冊一個帶有關閉值selval的新單擊處理程序，這是多次調用的原因。

您只能有一個單擊處理程序，它將獲取select的當前值playthis如下所示調用playthis

$(document).ready(function () {

    $('#start').on('click', function () {
        playthis($('#selectsite').val());
    });

    function playthis(value) {
        console.log("Selected option value is " + value);
    }

});

演示： 小提琴

另一個選擇是取消綁定以前的處理程序，如果可能的話，我不建議這樣做。

---

根據更新嘗試

$(document).ready(function () {

    var injsArray = $.parseJSON('<?php echo json_encode($data); ?>');
    $('#start').on('click', function () {
        var selval = $('#selectsite').val();
        var hdata = injsArray[selval]['dat']; //load the data
        playthis(selval, hdata);
    });

    function playthis(value, data) {
        console.log("Selected option value is " + value);
    }

});

Answer 2

像這樣嘗試，它將起作用

$('#selectsite').change(function(e) { 
   var selval = $(this).val();
   $('#start').click(function(){
       playthis(selval); 
   }); 
);

Answer 3

我想你想做這樣的事情

單擊“開始”獲取選定的值

你可以在這里查看演示

http://jsfiddle.net/victor_007/3xgLjdew/

JS

$(document).ready(function () {

    $('#start').click(function(){
        var a = $("#selectsite").val()
        alert(a);

        if(a == 0){
            alert("do this")
        }
        else if(a == 1){
            alert("do that")
        }
        else if(a == 2){
           alert("do other")
        }
    })

});