<select><option><input type="checkbox" />Headache</option></select>
By using the above code i did't get a check box inside a dropdown list.Can you suggest me , how should i proceed.
Add a comment
|
5 Answers
You can't have an input control inside a select element. You'll have to create the drop-down using JavaScript, without using the select element at all.
Comments
The reason that didn't work is that form elements don't nest like that. Fortunately, there's a jquery plugin that can do what you want. http://abeautifulsite.net/2008/04/jquery-multiselect/
Comments
That's not possible with "plain" HTML, you'll need to grab JavaScript to progressively enhance a plain dropdown into such a dropdown with help of <ul><li> elements and a good shot of CSS. You can find here an overview of what's all possible with jQuery (a JavaScript library), such as the jQuery dropdown checklist.
It's pretty simple, just import the desired JS libraries and apply it:
<!doctype html>
<html lang="en">
<head>
<title>Dropdown with checkboxes.</title>
<script src="jquery.js"></script>
<script src="dropdownchecklist.js"></script>
<script>
$(document).ready(function() {
$("#select_id").dropdownchecklist();
});
</script>
</head>
<body>
<select id="select_id">
...
</select>
</body>
</html>
That's all.
3 Comments
Radhe
thanks , I have tried it with modification but code is not working ,what should i do? In this code combo box is created without check box.Please elaborate........
Radhe
is there any plugin required for jquery?
BalusC
Only JavaScript and every webbrowser supports it.
Another approach on top of BalusC's one is to actually develop your own custom UI element. Unfortunately, this is usually (or always?) browser-specific.
I know you can do that for Firefox using XUL.
I'm sure you can do some ActiveX tricks for IE though no clue how.
2 Comments
Matti Virkkunen
Sounds like a whole lot of effort for something that be done with some JS and CSS
DVK
For this specific design, possibly. Not always
if we want to perform action on a button along with this checked listbox use javascript and html both.the following code may be helpful to u.
<%@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>
