Select onchange 事件第一次不起作用

Question

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

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

Answer 1

如果要在选择值后立即设置值，则需要使用onclick。 onchange 仅当新选择的值与实际选择的值不同时才有效（您的代码与我尝试的一样完美）。

Answer 2

试试下面的代码

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

Answer 3

我已经试过运行你的代码，它工作得很好，即使加载了 framework7。所以，至少我们知道 framework7 不是这里的真正问题。我认为您以某种方式在元素 #mySelect931 上附加了另一个事件侦听器。您可以尝试使用 $('#mySelect931').off(); 删除您的元素上的所有事件侦听器，然后找出这是否是根本原因。

请检查代码段：

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

另一个 肮脏的 hack 可能是，您自己触发 change 事件。即 $('#mySelect931').trigger('change'); 然而，这并不是正确的处理方式。

Select onchange 事件第一次不起作用

Select onchange event does not works on first time

javascript

jquery

html-framework-7