2012-02-24 80 views
6

我需要使用複選框填充下拉列表(HTML <select></select>)。我試圖使用<div></div>標籤顯示這樣的列表,並在JSP頁面中應用一些樣式,但它顯示列表框之類的列表。以下是JSP頁面中的代碼以及Javascript,它們只是提醒點擊頁面上唯一按鈕時已檢查的語言列表。如何在HTML下拉菜單中顯示覆選框?

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Check box list</title> 
</head> 

<script type="text/javascript" language="javascript"> 
    function selectCheckBox() 
    { 
     var total=""; 
     for(var i=0; i < document.form.languages.length; i++) 
     { 
      if(document.form.languages[i].checked) 
      { 
       total +=document.form.languages[i].value + "\n"; 
      } 
     } 
     if(total=="") 
     { 
      alert("select checkboxes"); 
     } 
     else 
     { 
      alert("Selected Values are : \n"+total); 
     } 
    } 
</script> 

<body> 
    <form id="form" name="form" method="post" action="CheckBox.jsp"> 
     <div style="overflow: auto; width: 100px; height: 80px; border: 1px solid #336699; padding-left: 5px"> 
      <input type="checkbox" name="languages" value="English"> English<br> 
      <input type="checkbox" name="languages" value="Hindi"> Hindi<br> 
      <input type="checkbox" name="languages" value="Italian"> Italian<br> 
      <input type="checkbox" name="languages" value="Chinese"> Chinese<br> 
      <input type="checkbox" name="languages" value="Japanese"> Japanese<br> 
      <input type="checkbox" name="languages" value="German"> German<br> 
     </div> 

     <br/><input type="button" name="goto" onClick="selectCheckBox()"value="Check"> 
    </form> 
</body> 

它只是顯示爲顯示在下面的快照的語言列表。

enter image description here

我需要做的是降低顯示的語言此列表的下降(而不是作爲一個列表框)。我怎樣才能做到這一點?

+6

一樣,http://code.google.com/p/dropdown-check-list/? – Joe 2012-02-24 19:04:44

+0

@JoeTuskan你應該真的發表這個答案。 Bhavesh,喬在評論中說的是,簡單的舊HTML不能做到這一點...你必須僱用一些JavaScript魔術......而一些優秀的人已經完成了大部分工作,並將其與世界分享Joe提供的鏈接。 – 2012-02-24 19:32:55

回答

15
+3

良好的捕獲,不幸的是:「DDCL V1.4與jQuery 1.8不兼容」 – Sebastian 2013-05-24 22:32:41

+0

@Sebastian可以很好地使用'jquery /1.10.2'和'jqueryui/1.10.3'。 http://jsbin.com/OrEqUfI/2/edit?html,output – 2013-10-31 22:43:12