如何通過ID和名稱陣列在Jquery Mobile中製作多選複選框或列表視圖

我正在Jquery Mobile中開發，並且我想顯示人員列表以及他們之中我想選擇一些人並將其保存到數據庫。我將如何顯示多個選擇的列表？如何通過ID和名稱陣列在Jquery Mobile中製作多選複選框或列表視圖

2012-01-07 Moiz Kachwala

嘿，你能不能詳細多一點，你的意思是你要創建HTML複選框以人名單被選中，誰選擇誰被存儲到數據庫？ – 2012-01-07 05:57:55

我正在通過JSON獲取人員列表以及那些數組。我想顯示在列表視圖或複選框，以便用戶可以從列表中選擇一些人。同時保存它將被保存在數據庫中。 – 2012-01-07 05:59:38

這裏是一個小例子。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 

    <script> 
     var array = [{ name: "John", value: "1"}, { name: "Alex", value: "2"},{ name: "John2", value: "3"}, { name: "Alex2", value: "4"}]; 

     function createCheckboxes(){ 
     $("#createBtn").remove(); 
     $("#content").append('<fieldset id="cbFieldSet" data-role="controlgroup">'); 
     var length = array.length; 
     for(var i=0;i<length;i++){ 
      $("#cbFieldSet").append('<input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="'+array[i].name+'"/><label for="cb-'+i+'">'+array[i].name+'</label>'); 
     } 

     $("#content").trigger("create"); 
     $("#showBtn").css("visibility","visible"); 
     } 

     function showSelectedNames(){ 
      var count = $("#cbFieldSet input:checked").length; 
      var str = ''; 
      for(i=0;i<count;i++){ 
       str += ' '+$("#cbFieldSet input:checked")[i].value; 
      } 
      alert("You selected----"+str); 
     } 
    </script> 
</head> 
<body> 

<div data-role="page" id="page1"> 

    <div data-role="header"> 
     <h1>Page1</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="content">  
     <a id="createBtn" data-role="button" onclick="createCheckboxes()">Create checkbox list from array</a> 
     <a id="showBtn" data-role="button" onclick="showSelectedNames()" style="visibility:hidden">Alert selected names</a>  
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

一個在這裏演示 - http://jsfiddle.net/DqqK8/

讓我知道這是否有助於

來源

2012-01-07 16:39:11 user700284

非常感謝您的迴應..它的工作很好.. – 2012-01-08 08:23:24

很高興成爲help.Please標記答案爲正確的。 – user700284 2012-01-08 09:07:13

所以，你可以寫一個函數來分析您的列表，並輸出HTML複選框，所有像一個名字：

< input type='checkbox' name='persons[]' value='jb' /> John Brown 
< input type='checkbox' name='persons[]' value='ts' /> Tim Slim

然後在你的服務器端腳本，說如果兩個複選框被選中，你會收到類似

persons("0" => "jb", "1"=>"ts")

一個數組，那麼你可以從那裏做驗證和存儲到數據庫中。所以如果你有var people = [{name：John，value：1}，{name：Alex，value：2}]; 經歷這樣的陣列：

for(person in people) 
{ 
    output "<input type='checkbox' name='people[]' value='person[value]'>person[name]"; 
}

希望這能解決你的問題

來源

2012-01-07 06:04:13

我有一個數組類似var array = [{name：John， value：1}， { name：Alex， value：2}];現在我該如何設置這個數組在複選框或列表視圖，以便可以選擇多個人？ – 2012-01-07 06:07:20

通過數組，如：for（）{output「 name」;} – 2012-01-07 06:08:18

var array = [{name：John，value：1 }，{name：Alex，value：2}]; 爲（在陣列人） { // chkDIv是div $（「＃chkDIv」）的名稱。附加（「數組[名稱]「）; }你的意思是？但它不起作用 – 2012-01-07 07:31:33

如何通過ID和名稱陣列在Jquery Mobile中製作多選複選框或列表視圖

回答

相關問題