| need help with advanced checkbox
advanced checkbox, checkbox onclick |
miteno
msg:3284617 | 10:15 am on Mar 17, 2007 (gmt 0) |
hello! can someone help me how do i make advanced checkbox,
i mean if someone click on checkbox, it must open small dropdown menu with advanced options, let say checkbox is called "airbags"
if you click it , it opens choice with "1 airbag, 2 airbags, 4 airbags ...", if you choose something , menu gets closed and you can see checkbox with changed description, e.g.: "4x airbags". it also must have different value id. i can send you url where i see it done, i just have no chance to code it. can someone make it for me , i'm gonna pay for it of course if not advice someone who can help
thanx
|
Moby_Dim
msg:3285272 | 6:46 am on Mar 18, 2007 (gmt 0) |
something like this may be : <html><head><title>Checkbox menu</title>
<style type="text/css">
<!--
#menu {visibility : hidden; width : 100px; height : 100px; border : 1px solid #999;}
.mitem {visibility : inherit; width : 98px; height : 23px; background : #ff0; margin : 1px;}
-->
</style>
<script type="text/javascript">
<!--
function che() {
var cb = document.getElementById("cbox");
var lcb = document.getElementById("lcbox");
var menu = document.getElementById("menu");
if(cb.checked == true) {
menu.style.visibility = 'visible'
}
else {
menu.style.visibility = 'hidden';
lcb.innerHTML = 'Choose airbags'
}
} function mche(id) {
var lcb = document.getElementById("lcbox");
var menu = document.getElementById("menu");
var menu_item = document.getElementById(id); lcb.innerHTML = menu_item.innerHTML;
menu.style.visibility = 'hidden';
}
// -->
</script>
</head> <body>
<form name="ff" id="ff">
<input type="checkbox" id="cbox" onchange="che()"> <label for="cbox" id="lcbox">Choose airbags</label>
</form>
<div id="menu">
<div id="mitem1" class="mitem" onclick="mche(this.id)">1 airbag</div>
<div id="mitem2" class="mitem" onclick="mche(this.id)">2 airbag</div>
<div id="mitem3" class="mitem" onclick="mche(this.id)">3 airbag</div>
<div id="mitem4" class="mitem" onclick="mche(this.id)">4 airbag</div>
</div>
</body>
</html> Did not understand fully the following : "it also must have different value id." What do you mean?
|
miteno
msg:3285394 | 12:25 pm on Mar 18, 2007 (gmt 0) |
thanx, i got something that match better to me: <HTML>
<HEAD>
<TITLE>Show Select Text in Label</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>
<FORM name='f1'>
<input type='checkbox' name='cb1' onclick="ShowSelectInLabel.cb(this,abSelect,'selOption')"><label id='selOption'>Add Airbags</label>
<SELECT name='abSelect'>
<option value=''>Please Select</option>
<option value='1'>1 Airbag</option>
<option value='2'>2 Airbags</option>
<option value='4'>4 Airbags</option>
</SELECT><BR>
<input type='checkbox' name='cb2' onclick="ShowSelectInLabel.cb(this,abSelect,'selOption')"><label id='selOption2'>Add Parking Assist</label>
<SELECT name='abSelect2'>
<option value=''>Please Select</option>
<option value='1'>Front Parking Assist</option>
<option value='2'>Rear Parking Assist</option>
<option value='3'>Front and Rear Parking Assist</option>
</SELECT>
</FORM> <SCRIPT type='text/javascript'> ShowSelectInLabel=
{
sets:[],
init:function(cBox, selBox, labelID)
{
var boxObj=this.sets[cBox.name]=[];
boxObj.cBox=cBox;
boxObj.selBox=selBox;
if( (boxObj.label=document.getElementById(labelID)).firstChild)
boxObj.txt = boxObj.label.firstChild.data;
else
boxObj.label.appendChild(document.createTextNode(''));
boxObj.selBox.onchange=new Function("ShowSelectInLabel.selBox(ShowSelectInLabel.sets['"+cBox.name+"'])");
boxObj.selBox.style.display='none';
boxObj.cBox.onclick=new Function("ShowSelectInLabel.cBox(ShowSelectInLabel.sets['"+cBox.name+"'])");
},
cBox:function(boxObj)
{
if(boxObj.cBox.checked)
{
boxObj.label.firstChild.data=boxObj.selBox.selectedIndex>0?boxObj.selBox[boxObj.selBox.selectedIndex].text:boxObj.txt;
boxObj.selBox.style.display='block';
}
else
{
boxObj.label.firstChild.data=boxObj.txt;
boxObj.selBox.selectedIndex=0;
boxObj.selBox.style.display='none';
}
},
selBox:function(boxObj)
{
var selected = boxObj.selBox.selectedIndex > 0,
selection= selected?boxObj.selBox[boxObj.selBox.selectedIndex]:null;
boxObj.label.firstChild.data=(selected?selection.text:boxObj.txt);
boxObj.selBox.style.display='none';
boxObj.cBox.checked=selected;
}
} ShowSelectInLabel.init(document.forms.f1.cb1, document.forms.f1.abSelect, 'selOption'); ShowSelectInLabel.init(document.forms.f1.cb2, document.forms.f1.abSelect2, 'selOption2'); </SCRIPT>
</BODY>
</HTML>
|
Moby_Dim
msg:3285434 | 1:08 pm on Mar 18, 2007 (gmt 0) |
Well, may be you are right. But my script's been created in 15 min. only. If you prefer complex solutions to simplicity - let it be. At the same time do not forget about usability issues. The later example requires 2 clicks vs. 1 in mine example to do the same. To escape this it's better to add "size" attribute to both select boxes may be. And finally I do not understand the primary idea in the end - why to hide select boxes at all? All this are obsolete and useless tricks. IMHO, of course.
|
miteno
msg:3286099 | 10:46 am on Mar 19, 2007 (gmt 0) |
i like that idea because why to show other options, if someone has chosen some option, it's saving with space.
thanx anyway for your imputs...
|
|
|
