Question

我有一个非常奇怪的问题，在我的网站上我有一个列表，根据用户选择更新另一个列表中的值：

<form id="form1">
        <div>
            <select id="workField">
                <option value="HI-TEC">HI-TEC</option>
                <option value="Food Industry">Food Industry</option>
                <option value="Marketing">Marketing</option>
            </select>
            <select id="occupetion">
                <option value="QA">QA</option>
                <option value="Food Industry">Food inspectur</option>
                <option value="Marketing">Selles man</option>
            </select>
        </div>
        <script>
            $("#workField").change(function () {
                if ($(this).val() == "HI-TEC") {
                    $("#occupetion").val("QA");
                }
                if ($(this).val() == "Food Industry") {
                    $("#occupetion").val("Food Industry");
                }
                if ($(this).val() == "Marketing") {
                    $("#occupetion").val("Marketing");
                }
            });
        </script>
    </form>

我添加了jQuery链接：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">

它停止工作。有什么建议？我仍然希望保持jQuery风格。

Answer 1

我刚测试过它并且工作正常，尝试将脚本放在head标签中并使用$（document）.ready（），并检查浏览器中是否有其他脚本导致的错误＃39;控制台。

<head>
    <script>
        $(document).ready(function(){
            $("#workField").change(function () {
                if ($(this).val() == "HI-TEC") {
                    $("#occupetion").val("QA");
                }
                if ($(this).val() == "Food Industry") {
                    $("#occupetion").val("Food Industry");
                }
                if ($(this).val() == "Marketing") {
                    $("#occupetion").val("Marketing");
                }
            });
        });
    </script>
</head>

Answer 2

确保你的东西有序，我刚刚测试了你的代码，它似乎工作正常。

所以Stylesheet首先在页面上声明，然后是jquery（在头部）。接下来是身体中的代码。

另外，当窗口准备好或加载时，你还没有声明是否需要它。

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
            $("#workField").change(function () {
                if ($(this).val() == "HI-TEC") {
                    $("#occupetion").val("QA");
                }
                if ($(this).val() == "Food Industry") {
                    $("#occupetion").val("Food Industry");
                }
                if ($(this).val() == "Marketing") {
                    $("#occupetion").val("Marketing");
                }
            });
});//]]>  

</script>

jsfiddle示例：http://jsfiddle.net/9bd4tg75/

Answer 3

请在头部添加此内容。

    <script>

        $(document).ready(function() {
            $("#workField").change(function() {
                if ($(this).val() == "HI-TEC") {
                    $("#occupetion").val("QA");
                }
                if ($(this).val() == "Food Industry") {
                    $("#occupetion").val("Food Industry");
                }
                if ($(this).val() == "Marketing") {
                    $("#occupetion").val("Marketing");
                }
            });
        })
    </script>

Answer 4

在我更改之前，您的代码对我不起作用：

<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">

为：

<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

如果您使用带语法检查或语法高亮的文本编辑器，则会出现此错误。

Answer 5

我为你创造了jsfiddle ..

代码： -

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

工作示例： - http://jsfiddle.net/dwxmjkb3/8/

我认为你从代码中遗失</script>看到了这个..

感谢

jQuery脚本和下拉列表

5 个答案: