Javascript / Jquery Mobile - Select(1) onChange Reset Fields for Select(2) [重复]答案

【问题标题】：Javascript / Jquery Mobile - Select(1) onChange Reset Fields for Select(2) [duplicate]Javascript / Jquery Mobile - Select(1) onChange Reset Fields for Select(2) [重复]
【发布时间】：2014-10-20 09:12:47
【问题描述】：

我完全是 JQuery Mobile 编程的菜鸟，我想寻求帮助...

我有两组下拉列表，第一个下拉列表中的任何选择都会将第二个下拉列表中的值重置为默认值“选择一个选项”。

根据我当前的设置，当您在第二个下拉列表中选择任何值然后您尝试使用第一个下拉列表中的任何值进行重置时，什么都不会发生。

我注意到，如果我在两个下拉列表中的每个 Select Field 中输入 data-role="none" ，它会关闭预期的 jquery 移动下拉设计并将该字段变为正常下拉和该功能将起作用。

谁能告诉我如何在保持 JQM 设计的同时使功能正常工作而无需输入 data-role="none"？

谢谢！

整个代码：

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta content="width=device-width, initial-scale=1" name="viewport">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

    <title>
    </title>
</head>

<body>
    <div data-role="page" data-theme="a">
        <div data-role="header" data-theme="b">
            <h1>Choose</h1>
        </div>


        <form id="boxes" name="boxes">
            <div class="row" style="text-align:center">

            </div>

        <div style="width: 60%; margin: 0px auto;">
              <div class="ui-field-contain">
            <select id="item1" name="Item1" onchange="message(this,'selecttwo');">
                <option value="0" selected="selected" disabled="disabled">Select An Option</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
         </div>
            </div>





      <div id="target17" style="width: 60%; margin: 0px auto; display: block;">
              <div class="ui-field-contain">
            <select id="selecttwo" name="selecttwo">
                <option value="0">Choose An Option </option>
                <option value="1">ONE</option>
                <option value="2">TWO</option>
                <option value="3">THREE</option>
                <option value="4">FOUR</option>
                <option value="5">FIVE</option>
                <option value="6">SIX</option>
            </select>
         </div>
            </div>


        </form>
<script type = "text/javascript">       
function message(which,fld) {
    document.getElementById(fld).value = "0";
}
</script>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html jquery-mobile

【解决方案1】：

它对我有用，没有任何问题。您必须在函数“boxes()”中遇到一些错误，导致它无法运行：

 var s2 = document.getElementById('item2');
 s2.value="abc";

【讨论】：

嗨 ignVinayak，有什么方法可以检查该函数中的错误吗？
我找到了根本原因... JQuery Mobile JS 文件和本机 JS 文件有冲突。我将 data-role="none" 应用于两个选择字段，它现在可以工作了！但是现在我的界面看起来很难看。