使用Javascript/jQuery Mobile的 - 选择（1）的onChange重置字段的选择（2）

我是一个在jQuery Mobile的编程完全小白，我想寻求帮助......使用Javascript/jQuery Mobile的 - 选择（1）的onChange重置字段的选择（2）

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

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

我注意到，如果我在两个下拉列表中的每个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>

来源

2014-10-20 Dexter Damien Chan

它的工作对我来说没有任何问题。你必须在函数“盒（）”中出现一些错误，它不会让它跑线：

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

来源

2014-10-20 09:48:22 ignVinayak

嗨ignVinayak，有没有任何方法来检查该函数中的错误？ – 2014-10-20 15:46:09

我找到了根本原因......与JQuery Mobile JS文件和原生JS文件有冲突。我将数据角色=“无”应用于两个选择字段，现在它可以工作！但现在我的界面看起来很丑。 – 2014-10-21 04:24:04

使用Javascript/jQuery Mobile的 - 选择（1）的onChange重置字段的选择（2）

回答

相关问题