Selecting multiple option from a select tag

[areef.islam]

Hi, I am kinda new to javascript and I am having this problem with
selecting multiple options from a select tag. Hope someone can help me
out here.

here is my code
///////////////////////////////////////////////////////////////////////////////////////
<form action="whatever.php" method="post">
<select name="zip_code"
onchange="makeRequest('getCity.php?state='+this.fo rm.zip_code.options[this.form.zip_code.selectedIndex].value)"
multiple="multiple" size="20">
<?
while($row = mysql_fetch_array($rs)){
?><option
value="<?=$row['f_fips_code']?>"><?=$row['f_name']?></option><?
}
?>
</select>
<select name="test" id="t1" multiple="multiple" size="40">
<option>Select a state</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
/////////////////////////////////////////////////////////////////////////////////////
Here I need to be able to select multiple options (zip codes) and then
pass those zip codes thru the makeRequest function which then calls a
php page to do a query to my db and returns the state and county under
that zip code. Now my code works fine for single selection but I don't
know how to do multiple selection. I know that if I name my select tag
as zip_code[] instead of zip_code that takes care of multiple selection
but then how should I pass those multiple selections thru the
makeRequest function?

Any help will be highly appreciable...

Thanks
Arif

[Richard Cornford]

ar*********@gmail.com wrote:

Hi, I am kinda new to javascript and I am having this problem
with selecting multiple options from a select tag. Hope someone
can help me out here.

here is my code
///////////////////////////////////////
<form action="whatever.php" method="post">
<select name="zip_code"
onchange="makeRequest('getCity.php?state='+
If a select box lists zip codes, and the PHP requests returns cites the
name 'state' is an inherently confusing choice to label any transmitted
data in this context.
this.form.zip_code.options[this.form.zip_code.selectedIndex].value)"
In the event handling function that is generated from the string value
of an intrinsic event attribute the - this - keyword is a reference to
the element to which the handler is attached; the select element with
the name 'zip_code' in this case.

The - form - property of that element is a reference to the form, and -
form.zip_code - is a common HTML DOM shortcut reference to the form
control with the name 'zip_code'. That is, - this - refers to the same
element as - this.form.zip_code - in this case, only more directly.
However, the mark-up here appears to be XHTML so in the event that it is
ever interpreted as XHTML and an XHTML DOM created from it to be
scripted (as opposed to an HTML DOM) then a different scripting
environment will apply. One of the many differences between and XHTML
DOM and an HTML DOM is that 'shortcut' and 'convenience' property
accessors that have not been formally specified (in the W3C Level 2 HTML
DOM specification) are not necessarily available for use, even when they
have been common (even universal) in HTML DOM implementations. So using
the 'shortcut' of referring to a named form control as a named property
of the containing form will not necessarily be reliable in XHTML DOM
implementations. The alternative of referring to such controls as named
properties of the form's - elements - collection should always be
available as it is formally specified.

The - selectedIndes - property of a SELECT element is not meaningful in
a multiple select element, and the value of any OPTION element that may
be selected is only ever going to be a single value from any group of
OPTIONs selected.

To find all of the selected OPTION elements in such a SELECT element it
is necessary to loop through the - options - collection of the SELECT
element and respond to each OPTION element's - selected - property
(which is boolean, either true or false). Something like:-

var options = this.options;
for(var c = options.length;--c;){
if( options[c].selected ){ //true if selected.
// do something with the - value of the selected option.
}
}

Exactly what is done with those values depends on what is needed. To
transmit them in the query value of a GET request would involve URL
encoding the values and assembling them into some sort of string that
can be disassembled on the sever to recover the data.
multiple="multiple" size="20">
<?
This is PHP code and so is one step removed from the (x)HTML +
javascript code that the browser receives. If there is a problem with
the client-side code looking at the server side code that generates it
is almost guaranteed to obscure the cause of the client-side problem
even for individuals who know the sever side language. Debugging the
client-side aspects of server generated HTML + javascript is
considerably aided by using the view source facilities on web-browses to
look at the code actually sent to the client, and it is that code that
should be posted to this group for the identification of client-side
issues.
while($row = mysql_fetch_array($rs)){
?><option
value="<?=$row['f_fips_code']?>"><?=$row['f_name']?></option><?
}
?>
</select>
<select name="test" id="t1" multiple="multiple" size="40">
<option>Select a state</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
/////////////////////////////////////////////////////
Here I need to be able to select multiple options (zip codes) and then
pass those zip codes thru the makeRequest function which then calls a
php page to do a query to my db and returns the state and county under
that zip code.

<snip>

What you are building here is needlessly javascript dependent.

Richard.

[areef.islam]

Thanks a lot Richard. I appreciate your help. Next time I will try to
be more specific when I post something here.