javascript - Select onchange event does not works on first time - Stack Overflow

admin管理员组

文章数量:1431453

I have this javascript code which is within Framework7 used for a phonegap application. I want the values to change in table as soon as the option is selected; this does not work when a value is selected for the 1st time but works flawlessly when selected second time.

$('#mySelect931').on('change', function (e) {

  var value = document.getElementById("mySelect931").value;
      //myApp.alert(value);

      if(value == 'M4'){
            var a = 'M4'; //value of d
            var b = '14'; // value of b to 125
            var c = '-'; //value of b to 200
            var d = '-'; // value of b over 200
            var e = '2.8'; // value of k
            var f = '7.66'; // value of e
            var g = '7'; // value of s
        }
});

Here's html code.

<select id="mySelect931" style='background-color: #e3e3e3; color: black;'>
    <option value="0" selected="selected">Select Value</option>
    <option value="M4">M4</option>
    <option value="M5">M5</option>
    <option value="M6">M6</option>
</select>

I have this javascript code which is within Framework7 used for a phonegap application. I want the values to change in table as soon as the option is selected; this does not work when a value is selected for the 1st time but works flawlessly when selected second time.

$('#mySelect931').on('change', function (e) {

  var value = document.getElementById("mySelect931").value;
      //myApp.alert(value);

      if(value == 'M4'){
            var a = 'M4'; //value of d
            var b = '14'; // value of b to 125
            var c = '-'; //value of b to 200
            var d = '-'; // value of b over 200
            var e = '2.8'; // value of k
            var f = '7.66'; // value of e
            var g = '7'; // value of s
        }
});

Here's html code.

<select id="mySelect931" style='background-color: #e3e3e3; color: black;'>
    <option value="0" selected="selected">Select Value</option>
    <option value="M4">M4</option>
    <option value="M5">M5</option>
    <option value="M6">M6</option>
</select>

• javascript
• jquery
• html-framework-7

Share Improve this question Follow asked Mar 4, 2017 at 20:51 Utpal - Ur Best PalUtpal - Ur Best Pal 4,53244 gold badges1818 silver badges2828 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

TRY WITH BELOW CODE

HTML
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<select id="mySelect931" style='background-color: #e3e3e3; color: black;'>
    <option value="0" selected="selected">Select Value</option>
    <option value="M4">M4</option>
    <option value="M5">M5</option>
    <option value="M6">M6</option>
</select>

JQUERY
jQuery(document).ready(function(){
    jQuery('#mySelect931').change(function(){
        alert(jQuery(this).val());
    }); 
});

I have tried running your code and it works perfectly fine, even with framework7 loaded. So, atleast we know that framework7 isn't the real issue here. I think you are somehow attaching another event listener on the element #mySelect931. You could try to remove all event listeners on your element my using $('#mySelect931').off(); and figure out if thats the root cause.

Please check the snippet:

    // code works even without the below line
    $('#mySelect931').off();  // remove all event listeners for this element
    $('#mySelect931').on('change', function (e) {
        var value = document.getElementById("mySelect931").value;
        alert('selected Value: ' + value);
        if(value == 'M4'){
            var a = 'M4'; //value of d
            var b = '14'; // value of b to 125
            var c = '-'; //value of b to 200
            var d = '-'; // value of b over 200
            var e = '2.8'; // value of k
            var f = '7.66'; // value of e
            var g = '7'; // value of s
        }
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/framework7/1.5.4/js/framework7.min.js"></script>

<select id="mySelect931" style='background-color: #e3e3e3; color: black;'>
    <option value="0" selected="selected">Select Value</option>
    <option value="M4">M4</option>
    <option value="M5">M5</option>
    <option value="M6">M6</option>
</select>

Another dirty hack could be, is to trigger the change event yourself. i.e. $('#mySelect931').trigger('change'); However, it is not the correct way to handle it.

If you want to set the value as soon as the value is selected, you will need to use onclick. onchange only works when the new selected value is different than the actual selected (your code works perfectly as I tried).

本文标签： javascriptSelect onchange event does not works on first timeStack Overflow