jQuery脚本和下拉列表[重复]答案

【问题标题】：jQuery script and drop down lists [duplicate]jQuery脚本和下拉列表[重复]
【发布时间】：2014-08-10 08:53:03
【问题描述】：

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

<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风格。

【问题讨论】：

jsfiddle.net/Palestinian/dwxmjkb3/9

标签： javascript jquery html jquery-mobile

【解决方案1】：

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

所以样式表首先在页面上声明，然后是 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/

【讨论】：

sory 但是当我使用jqurey链接时它仍然不起作用，js代码很好，与结构相同。

【解决方案2】：

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

【讨论】：

试过了，问题不在于，它是在我添加 jqurey 链接时开始的。

【解决方案3】：

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

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

【讨论】：

【解决方案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>

如果您使用带有语法检查或语法高亮功能的文本编辑器，这个错误就会很明显。

【讨论】：

不，这不是问题，我没有复制粘贴。
您的问题应该更新，以防止其他用户犯此错误。

【解决方案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>，请参阅此..

谢谢

【讨论】：

它工作正常，直到我有 jqurey 链接，仍然没有解决这个问题。不过谢谢！
jsfiddle 不适合你？
工作，但就像我说的，jquery 链接有问题： code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
你能把你的代码粘贴到 jsfiddle 并告诉我你的问题吗？请从脚本和链接中删除分号，并在 html 中提供 href 之前的空格，谢谢
我想我明白了，谢谢你，我有 2 个链接不能一起使用！谢谢你！！