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

just put alert inside on change event , check its go inside that function or not — vignesh.D, Sep 11 '14 at 05:14

Arun P Johny · Answer 1 · 2014-09-11T06:04:28.203

4

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

});

edited Sep 11 '14 at 06:04

answered Sep 11 '14 at 05:15

Arun P Johny

384,651
66
527
531

but I need to check if its first option which is by default or the next options – SkillsIndexOutOfBounds Sep 11 '14 at 05:23
@RonitAdhikari There is exactly no difference in the code you posted about the default. – epascarello Sep 11 '14 at 05:25
@RonitAdhikari what do you mean? – Arun P Johny Sep 11 '14 at 05:25
@ArunPJohny actually I am sending json data as second parameter in playthis function so by the solution you provided it works fine but if I have to send data which is on the basis of selected option How can I achieve that ?? – SkillsIndexOutOfBounds Sep 11 '14 at 05:32
I have edited my question to make it more clear....data is also passed as second parameter – SkillsIndexOutOfBounds Sep 11 '14 at 05:39
unbinding the previous click handlers worked for me. thanks @ArunPJohny – SkillsIndexOutOfBounds Sep 11 '14 at 05:49

score 0 · Answer 2 · edited Sep 11 '14 at 05:18

0

Try like this it will work

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

edited Sep 11 '14 at 05:18

T J

42,762
13
83
138

answered Sep 11 '14 at 05:17

Gajawada

59
1
12

Your answer will have same exact issue and click(...) is the same exact thing as on("click",...) – epascarello Sep 11 '14 at 05:21

score 0 · Answer 3 · answered Sep 11 '14 at 05:28

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

});

onchange select option not working

3 Answers3