2012-03-19 83 views
4

我檢查了所有關於jquery mobile select multiple的主題,但仍然無法弄清楚我的代碼出了什麼問題。JQuery mobile選擇多個

http://jsfiddle.net/HMWYu/

<!DOCTYPE html> <html> 
<head> <title>Registration</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
</head> 
<body> 
    <div data-role="page" id="home"> 
     <header data-role="header"> 
     <h1>Register</h1> 
    </header> 
     <div data-role="content"> 
         <div data-role="fieldcontain"> 
       <label for="Services" class="ui-hidden-accessible "> 
        Services:</label> 
       <select name="Services" id="Services" multiple="multiple" size="4"> 
        <option >Hotel</option> 
        <option >Transport</option> 
        <option >Others</option> 
       </select> 
      </div> 
     </div> 
      </div> 
</body> 
</html> 

任何幫助,將不勝感激

回答

13

使用JQM用於多個自定義選擇菜單。 http://jquerymobile.com/demos/1.0.1/docs/forms/selects/custom.html 首先將data-native-menu =「false」添加到您的選擇菜單中。然後確保你的選擇有價值。我添加了一個用作佔位符的選項來代替標籤。 以下是我的示例:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Registration</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="home"> 
    <header data-role="header"> 
     <h1>Register</h1> 
    </header> 
    <div data-role="content"> 
     <div data-role="fieldcontain"> 
      <label for="Services" class="ui-hidden-accessible " > 
       Country: 
      </label> 
      <select name="Services" id="Services" data-native-menu="false" data-mini="true" multiple="multiple" size="4"> 
       <option>Country</option> 
       <option value="hotel">Hotel</option> 
       <option value="transport">Transport</option> 
       <option value="others">Others</option> 
      </select> 
     </div> 
    </div> 
</div> 
</body> 
</html> 
​ 
+1

您如何確保將所有選定的選項發送到服務器?在我的情況下,只有最後選擇的一個被髮送。 – 2012-09-27 19:37:33

+0

所有的價值都是爲我而發送的。你確定你正在做一個req.getParameterValues()而不是隻req.getParameter()? – 2013-02-27 08:44:51