Forum Moderators: open
Anyway the main issue at hand is giving the advertiser an easy way to select all the regions in a given state simply by clicking the disabled state option. I would also imagine this will work well as IE does not support disabled options.
I've been looking around the web and haven't found anything close to this or even how to change an option selected by it's ID to change between selected or not. I don't mind creating a small database of which IDs (regions) are associated with which states inside the script itself but I just need a couple examples to get me going. I'm currently using the quoted page below as a template for testing this out.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>I like Candy</title>
<script type="text/javascript">
//<![CDATA[//]]>
</script>
</head><body>
<form>
<fieldset>
<select class="state" name="" multiple="multiple" size="10">
<option class="state" disabled="disabled" onmousedown="select(state1)" value="state">State 1</option>
<option class="region" id="0001" value="#">Region</option>
<option class="region" id="0002" value="#">Region</option>
<option class="region" id="0003" value="#">Region</option>
<option class="region" id="0004" value="#">Region</option>
<option class="region" id="0005" value="#">Region</option>
<option class="region" id="0006" value="#">Region</option>
<option class="state" disabled="disabled" onmousedown="select(state2)" value="state">State 2</option>
<option class="region" id="0007" value="#">Region</option>
<option class="region" id="0008" value="#">Region</option>
<option class="region" id="0009" value="#">Region</option>
<option class="region" id="0010" value="#">Region</option>
<option class="region" id="0011" value="#">Region</option>
<option class="region" id="0012" value="#">Region</option>
</select></fieldset>
</form></body>
</html>
- John
An optgroup for each state might provide some use, as well.
[edited by: Rambo_Tribble at 1:59 am (utc) on Aug. 5, 2006]
In the very least how would I use JavaScript to change the select state of an option?
- John
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
</style>
<script type="text/javascript">
function slctAll(opt){
ops=document.getElementById('s1').getElementsByTagName('option');
ops_ln=ops.length;
slct_stat=opt.selected;
slct_cl=opt.className;
for(i=0;i<ops_ln;i++){
if(ops[i].className==slct_cl)ops[i].selected=slct_stat;
}
}
</script>
</head>
<body>
<form action="">
<p>
<select id="s1" multiple="multiple">
<option class="ca" value="x" onclick="slctAll(this);">CA</option>
<option class="ca" value="x">1</option>
<option class="ca" value="x">2</option>
<option class="ca" value="x">3</option>
<option class="or" value="y" onclick="slctAll(this);">OR</option>
<option class="or" value="y">3</option>
<option class="or" value="y">4</option>
<option class="or" value="y">5</option>
</select>
</p>
</form>
</body>
</html>
Anyway the script is already dynamic and I only understand it to a limited point so I'm not sure how to toy with it to get it to work in IE though I'm sure it's something proprietary. Thanks for helping me this far!
- John
I'm afraid that it turns out that IE, like Konqueror, only supports events at the select level, not the option level. This creates some significant problems for what you are trying to do. This makes it difficult, if not impossible to isolate a group of a single state's regions.
Your only option (no pun intended) may be to simulate a select box with other elements. It isn't too difficult to style lists to appear as selects.
[edited by: Rambo_Tribble at 3:12 pm (utc) on Aug. 7, 2006]
If you go the route of the select simulation, make sure you make the thing work without JavaScript, as well. A couple approaches occur, including placing an absolutely positioned select to obscure the list, within noscript tags. Let me know if you'd like other ideas.
You care about IE? Is this your way of telling us you work with the handicapped?
IoI to some extent I do though JavaScript often enough can make up for IE's shortcomings though not always.
Your script was dyanmic, what if we went with a static script instead? I might have to create a small reference database by having one id select several others manually but if it works in IE then well, it works...would that work?
- John
One important question to fashioning a work-around is, "Does this have to be submitted as a form?" If so, the list would have be tied by script to a form (though it could be hidden).
An onclick event on the select triggers the creation of a new array with the current checked status of the options, which is then compared for all elements with class_string_value.indexOf('st')!=-1 against the initial array. If a change is found, then all options with the same state name class (e.g. 'ca') and a class of 'rg' are brought into line with the 'st' option.
