onchange选择选项不起作用

时间:2014-09-11 05:11:37

标签: javascript jquery onchange

这里的人是我的脚本,可以在更改时获取所选选项的值,但不能按预期工作。选项更改我想获取所选选项的值,但它返回所有先前和当前值。为什么?

<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>

如何解决这个问题?因为我刚开始编程,请建议我是否做错了。 提前致谢

3 个答案:

答案 0 :(得分:4)

每次调用更改处理程序时,您都会注册一个带有闭包值selval的新单击处理程序,这是多次调用的原因。

您只能有一个点击处理程序,可以获取select的当前值并调用playthis,如下所示

$(document).ready(function () {

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

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

});

演示:Fiddle

另一种选择是取消绑定以前的处理程序,如果可能的话我不会推荐。


根据更新尝试

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

});

答案 1 :(得分:0)

尝试这样做会起作用

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

答案 2 :(得分:0)

我想你想做这样的事情

点击开始

获取所选值

你可以在这里查看演示

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")
        }
    })

});