使用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）

回答

相關問題