选择onchange事件第一次不起作用

时间:2017-03-04 20:51:57

标签: javascript jquery html-framework-7

我有这个javascript代码,它位于用于phonegap应用程序的Framework7中。我希望在选择该选项后立即在表中更改值;当第一次选择值但在第二次选择时完美无缺地工作时,这不起作用。

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

这是html代码。

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

3 个答案:

答案 0 :(得分:0)

如果您想在选择值后立即设置值 ,则需要使用onclickonchange仅在新选择的值与实际选择的值不同时才有效(您的代码与我尝试的完美匹配)。

答案 1 :(得分:0)

尝试以下代码

HTML
<script src="https://cdnjs.cloudflare.com/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());
    }); 
});

答案 2 :(得分:0)

我已尝试运行您的代码,即使加载了framework7,它也能正常运行。所以,至少我们知道框架7并不是真正的问题。我认为你以某种方式在元素#mySelect931上附加另一个事件监听器。您可以尝试使用$('#mySelect931').off();删除元素上的所有事件侦听器,并确定这是否是根本原因。

请查看代码段:

&#13;
&#13;
    // 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
        }
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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>
&#13;
&#13;
&#13;

另一个脏黑客可能是,自己触发change事件。即$('#mySelect931').trigger('change'); 但是,这不是处理它的正确方法。