Replace selectBox with different SelectBox

[TribeMan]

My code begins with a citySelectBox e.g.,

<option value="">-- select city --
<option value="-1">[-- change country --]
<option value="1">Washington
<option value="2">New York
<option value="3">Baltimore
<option value="4">Denver
etc

I have a problem if user clicks [-- change country --].
What I want is the following:
1) the existing citySelectBox must be replaced by a countrySelectBox
2) on change, the countrySelectBox must be replaced by a new citySelectBox with the new cities.

The detailed code follows (with my problem area commented out). Any help wiould be appreciated.

Thanks

New Kid on the Block

<!--
    function loadCities(countryID){
        if(countryID == "") {
            displayCities("");
            return;
        }
        var contentLoader = new ylib.util.ContentLoader(this,"/ajax/citiesServer.asp?c=" + countryID,cityCallback,null);
        //var x = req.send("GET",,"",null,null,false,countryID,cityCallback,null);
        contentLoader.SendRequest();
    }
    function cityCallback(request){
        displayCities(request.responseText);
    }

   function displayCities(cityOptions) {

		var citySelect = xGetElementById('ct');
		xDisplay(citySelect,'block');

     var cityDiv = xGetElementById('ctWrapper'); 
        var selectBox = "";       
        if(cityOptions != '') {
            selectBox = "<select name='ct' id='ct' onchange='this.form.submit();'><option value=''>-- select city --</option>" +
            cityOptions +
            "</select>";
         }

         cityDiv.innerHTML = selectBox;
  }
-->
</script>
<form name="citySelect" method="GET" action="../en/city.asp" onsubmit="alert('submit to default page');return false;">
	<table align="right" border="0">
	<tr>
<!-- Problem area
		<th>
			<p id='ctWrapper'></p>
		</th>
		<th>
			<select class="form" name='c' onchange='loadCities(this.options[this.selectedIndex].value);'>
				<option value="">-- Select Country --</option>
				<option value="63">USA - Central</option>
				<option value="2">USA - North East</option>
				<option value="61">USA - South East</option>
				<option value="62">USA - West</option>
				<option value="3">United Kingdom</option>
				<option value="4">South Africa</option>
				<%=list_DefaultCountryOptions("")%>
			</select>
		</th>
-->
		<th>
			<select name="ct" id="ct" onchange="submit()">
				<option value=''>-- change city --</option>
				<option value='-1'>[-- change country --]</option>
				<%=list_CityOptions("")%>
			</select>
		</th>
	</tr>
</table>
</form>

 

[BillyRayPreachersSon]

Help us to help you - give us some basic details!

- In what way does the code above not work?
- What errors do you get?
- What happens that shouldn't?
- What doesn't happen that should?

This is valuable information that should accompany any post asking for help, IMHO.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[TribeMan]

My apologies. I should have been more explicit.

Basically the code works... even with the 'commented-out' tags removed.

However, what I want is only ONE selectbox displayed at a time, not the 3 different select boxes in 3 different table cells of the table.

I initially want the citySelect to display, but if user clicks option [-- change country --], then the citySelect is REPLACED by the countrySelect. Then, on making a country selection, the countrySelect is REPLACED by a new citySelect which is populated with the new city list.

I hope this make it a bit more clear.

Thanks

 

[BillyRayPreachersSon]

I'd start by fixing the existing issues:

- In the onchange event of the "ct" select element, you are calling a method "submit()" which does not exist (as far as we know, at least, as you've not shown it)

- Your code implies that you will be overwriting the contents of "cityDiv" (p#ctWrapper) with the new list, yet none of your existing lists are in that container, so of course they will never be removed.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[vacunita]

Take a step and follow your own logic:

I initially want the citySelect to display,

[ul][li]Hide all your selects except the default city select to begin. style="display:none;"[/li][/ul]

but if user clicks option [-- change country --], then the citySelect is REPLACED by the countrySelect.

[ul][li]hide the city Select, and unhide your country Select
countrySelect.style.display='block';
citySelect.style.display='hidden';
[/li][/ul]

Then, on making a country selection, the countrySelect is REPLACED by a new citySelect which is populated with the new city list.

[ul][li]Once again hide your countrySelect, populate your new list, and display it. [/li][/ul]




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/