javascript - 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，如下所示

$(document).ready(function () {

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

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

});

演示:Fiddle

另一个选择是取消绑定(bind)以前的处理程序，如果可能的话我不建议这样做。

<小时/>

基于更新尝试

$(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);
    }

});