2012-02-24 16 views
6

Necesito completar una lista desplegable (HTML <select></select>) con casillas de verificación. He intentado mostrar una lista de este tipo utilizando una etiqueta <div></div> y aplicando algunos estilos en la página JSP, pero muestra una lista como un cuadro de lista. A continuación se muestra el código en la página JSP junto con Javascript que solo alerta a la lista de idiomas que se han verificado cuando se hace clic en el único botón de la página.¿Cómo mostrar casillas de verificación dentro del menú desplegable de 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> 

sólo muestra una lista de los idiomas como se muestra en la siguiente instantánea.

enter image description here

Lo que necesito es para mostrar la lista de las lenguas como un menú desplegable (no como un cuadro de lista). ¿Cómo puedo hacer esto?

+6

igual, http://code.google.com/p/dropdown-check-list/? – Joe

+0

@JoeTuskan Realmente deberías publicar esto como la respuesta. Bhavesh, lo que Joe dice con su comentario es que el viejo y simple HTML no puede ... hay que emplear algo de magia de JavaScript ... y algunas buenas personas ya han hecho la mayor parte del trabajo y lo han compartido con el mundo en el enlace que Joe brindó. –

Respuesta

15
+3

Buena captura, desafortunadamente: "DDCL V1.4 NO es compatible con jQuery 1.8" – Sebastian

+0

@Sebastian Funciona bien con 'jquery/1.10.2' y' jqueryui/1.10.3'. http://jsbin.com/OrEqUfI/2/edit?html,output –

Cuestiones relacionadas