Javascript / Jquery Mobile - 选择(1)onChange重置字段选择(2)

时间:2014-10-20 09:12:47

标签: javascript html jquery-mobile

我是JQuery Mobile编程中的一员,我想寻求帮助......

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

根据我当前的设置,当您在第二个下拉列表中选择任何值时,没有任何反应,然后您尝试使用第一个下拉列表中的任何值重置。

我注意到如果输入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>

1 个答案:

答案 0 :(得分:0)

它没有任何问题对我有用。您必须在函数“boxes()”中出现一些错误,而不是让它运行该行:

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