Question

我试图检测Select的值何时发生变化（例如用户选择其中一个下拉选项）。但是我似乎无法解决这个问题。我尝试了很多解决方案，但我显然有一个缺少某些东西的日子，但我看不到树林里的树林。

以下是我目前的情况：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- jQueryMobileCSS - original without styling -->
    <link rel="stylesheet" href="nativeDroid_v0.2.2/development/css/jquerymobile.css" />
    <!-- jQuery / jQueryMobile Scripts -->
    <script src="JQueryMobile/jquery-1.10.2.js"></script>
    <script src="JQueryMobile/jquery.mobile-1.3.2.js"></script>
    <!-- customised styles -->
    <link rel="stylesheet" type="text/css" href="css/index.css" />  

            <script type="text/javascript">
        $(".test").change(function() {
          //var newVal = $(this).val();
          alert("The new value is: " + $(this).val());
        });
                </script>
</head>

<body> 


                    <select name="select-choice-enmeasurement" id="select-choice-enmeasurement" class="test">
                        <option value="C45">C45</option>
                        <option value="M3">M3</option>
                        <option value="M5">M5</option>
                        <option value="M8">M8</option>
                    </select>

    </body>
</html>

我也尝试了上述方法，但是通过检测选择控件的类而不是Id。

P.S。有一个对JqueryMobile的引用纯粹是因为上面是从JQM项目中提取的。但是我已经将上述内容创建为此表单中的唯一页面，以消除潜在的冲突等。

任何想法/建议将不胜感激。感谢。

Answer 1

使用

$(function(){
    $(".test").change(function() {
      //var newVal = $(this).val();
      alert("The new value is: " + $(this).val());
    });
)};

没有它，您尝试将eventHandler添加到具有.test类的所有元素，但您的选择尚未创建 - html将从上到下进行解析。加载整个页面时会触发$(function(){ }); - 包括您的选择。在函数中，您可以添加处理程序，因为所有HTML元素都已加载。

Answer 2

在收到KamilT和Omar的有用评论之后，我解决了无法将JavaScript放在表单之外的问题。

解决方案是在元素id之前包含表单id。例如：

    <script type="text/javascript">
        $("#formenstep1 #select-choice-enmeasurement").change(function() {
            //alert("The new value is: " + $(this).val());
        });
    </script>

这现在可以位于页面html的页脚，它将拾取所需的表单元素。

Javascript选择Change Wont Fire

2 个答案: