onchange select option not working

Question

Guys here is my script to get value of selected option on change but not working as expected. on option change I want to get the value of the selected option but it returns all the previous and current value.Why so?

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

How to solve this problem? Please suggest if I am doing something wrong since I am new to programming. Thanks in advance

Answer 1

Every time the change handler is called you are registering a new click handler with a closure value selval that is the reason for the multiple calls.

You can only have one click handler which will fetch the current value of the select and call playthis as below

$(document).ready(function () {

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

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

});

Demo: Fiddle

Another option will be is to unbind the previous handlers which I wouldn't recommend if possible.

---

Based on the update try

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

I think you want to do something like this

getting the selected value on click of start

you can check the demo here

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

});

Answer 3

Try like this it will work

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