2012-03-19 89 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