Page 1 of 1

Update drop down when user selects an option

Posted: Tue Nov 30, 2004 5:55 am
by Chris Corbyn
Sorry the code looks long.... It's just because of all the options in the list...

Code: Select all

<html>
<head>
<script language="JavaScript">
<!--
function updateForm1(el) &#123;
	document.getElementById('mccmnc').value = el.value
	if (mncArray&#1111;el.value]) &#123;
		document.getElementById('mnc').innerHTML = // populate the drop down
	&#125;
&#125;

mncArray = new Array()
	// United Kingdom
	mncArray&#1111;"234"] = new Array ()
		mncArray&#1111;"234"]&#1111;"00"] = "Virgin"
		mncArray&#1111;"234"]&#1111;"00001"] = "Virgin 2003 Spec"
		mncArray&#1111;"234"]&#1111;"10"] = "O2/Bt Cellnet"
		mncArray&#1111;"234"]&#1111;"15"] = "Vodafone"
		mncArray&#1111;"234"]&#1111;"30"] = "T-Mobile/1-2-1"
		mncArray&#1111;"234"]&#1111;"33"] = "Orange"
		mncArray&#1111;"234"]&#1111;"50"] = "Jersey Telecom GSM"
		mncArray&#1111;"234"]&#1111;"55"] = "Guernsey Telecoms GSM"
		mncArray&#1111;"234"]&#1111;"58"] = "Manx Telecom Pronto GSM"
// -->
</script>
</head>
<body>
<form name="details">
<select name="mcc" id="mcc" onChange="updateForm1(this)">
	<option value="276">Albania</option>
	<option value="603">Algeria</option>
	<option value="213">Andorra</option>
	<option value="283">Armenia</option>
	<option value="505">Australia</option>
	<option value="232">Austria</option>
	<option value="400">Azerbaijan</option>
	<option value="426">Bahrain</option>
	<option value="470">Bangladesh</option>
	<option value="206">Belgium</option>
	<option value="218">Bosnia Herzegovina</option>
	<option value="652">Botswana</option>
	<option value="528">Brunei Darussalam</option>
	<option value="284">Bulgaraia</option>
	<option value="724">Brazil</option>
	<option value="456">Cambodia</option>
	<option value="624">Cameroon</option>
	<option value="302">Canada</option>
	<option value="625">Cape Verde</option>
	<option value="730">Chile</option>
	<option value="460">China</option>
	<option value="612">Cote d'Ivoire</option>
	<option value="219">Croatia</option>
	<option value="280">Cyprus</option>
	<option value="230">Czech Republic</option>
	<option value="238">Denmark</option>
	<option value="602">Egypt</option>
	<option value="248">Estonia</option>
	<option value="636">Ethiopia</option>
	<option value="542">Fiji</option>
	<option value="244">Finland</option>
	<option value="208">France</option>
	<option value="547">French Polynesia</option>
	<option value="340">French West Indies</option>
	<option value="282">Georgia</option>
	<option value="262">Germany</option>
	<option value="620">Ghana</option>
	<option value="266">Gibraltar</option>
	<option value="202">Greece</option>
	<option value="290">Greenland</option>
	<option value="611">Guinea</option>
	<option value="454">Hong Kong</option>
	<option value="216">Hungary</option>
	<option value="274">Iceland</option>
	<option value="404">India</option>
	<option value="510">Indonesia</option>
	<option value="432">Iran</option>
	<option value="418">Iraq</option>
	<option value="272">Ireland</option>
	<option value="425">Israel</option>
	<option value="222">Italy</option>
	<option value="416">Jordan</option>
	<option value="419">Kuwait</option>
	<option value="437">Kyrgyz Republic</option>
	<option value="457">Lao</option>
	<option value="247">Latvia</option>
	<option value="415">Lebanon</option>
	<option value="651">Lesotho</option>
	<option value="618">Liberia</option>
	<option value="246">Lithuania</option>
	<option value="270">Luxembourg</option>
	<option value="455">Macau</option>
	<option value="294">Macedonia</option>
	<option value="646">Madagascar</option>
	<option value="650">Malawi</option>
	<option value="502">Malaysia</option>
	<option value="278">Malta</option>
	<option value="617">Mauritius</option>
	<option value="259">Moldova</option>
	<option value="604">Morocco</option>
	<option value="634">Mozambique</option>
	<option value="649">Namibia</option>
	<option value="204">Netherlands</option>
	<option value="546">New Caledonia</option>
	<option value="530">New Zealand</option>
	<option value="242">Norway</option>
	<option value="422">Oman</option>
	<option value="410">Pakistan</option>
	<option value="310">Papua New Guinea</option>
	<option value="515">Philippines</option>
	<option value="260">Poland</option>
	<option value="268">Portugal</option>
	<option value="427">Qatar</option>
	<option value="647">Reunion</option>
	<option value="226">Romania</option>
	<option value="250">Russia</option>
	<option value="635">Rwanda</option>
	<option value="420">Saudi Arabia</option>
	<option value="608">Senegal</option>
	<option value="633">Seychelles</option>
	<option value="525">Singapore</option>
	<option value="231">Slovak Republic</option>
	<option value="293">Slovenia</option>
	<option value="655">South Africa</option>
	<option value="214">Spain</option>
	<option value="413">Sri Lanka</option>
	<option value="634">Sudan</option>
	<option value="240">Sweden</option>
	<option value="228">Switzerland</option>
	<option value="417">Syria</option>
	<option value="466">Taiwan</option>
	<option value="640">Tanzania</option>
	<option value="520">Thailand</option>
	<option value="615">Togo</option>
	<option value="605">Tunisia</option>
	<option value="286">Turkey</option>
	<option value="310">USA</option>
	<option value="641">Uganda</option>
	<option value="255">Ukraine</option>
	<option value="424">United Arab Emirates</option>
	<option value="234">United Kingdom</option>
	<option value="434">Uzbekistan</option>
	<option value="734">Venezuela</option>
	<option value="452">Vietnam</option>
	<option value="220">Yugoslavia</option>
	<option value="645">Zambia</option>
	<option value="648">Zimbabwe</option>	
</select>
<p>
<select name="mnc" id="mnc">
	<option value="">Select provider</option>
</select>
<p>
<input type="text" name="mccmnc" id="mccmnc" value="">
</form>

</body>
</html>
I'm making an application which genertaes codes for mobile phones. I need to be able to get my form to change dynamically as the user makes various options. I can do most of this but I'm a bit stuck on one thing. I want the drop down with id "mnc" to populate with the relevant data from mncArray.

i've used The United Kingdom codes from my list as test for this, so if the user selects United Kingdom from the first drop down I'd like the second drop down (id = "mnc") to populate as follows:

Code: Select all

<select name="mnc" id="mnc">
<option value="00">Virgin</option>
<option value="00001">Virgin 2003 spec</option>
<option value="10">O2/Bt Cellnet</option>
<option value="15">Vodafone</option>
<option value="30">T-Mobile/1-2-1</option>
etc etc......
How do I use my Array of arrays to do this?

Thanks in adavnce :-)

Posted: Tue Nov 30, 2004 8:07 am
by Chris Corbyn
Changed my code... maybe the multidimensional array wasn't all that user freindly before. this might be better.... Still not sure how to render the options for the drop down though.

Code: Select all

<html>
<head>
<script language="JavaScript">
<!--
function updateForm1(el) &#123;
	document.getElementById('mccmnc').value = el.value
	if (mncArray&#1111;el.value]) &#123;
		for (i=0; i<mncArray.length; i++) &#123;
			netArray = mncArray&#1111;el.value]&#1111;i].split("#")
			var net = netArray&#1111;0]
			var mnc = netArray&#1111;1]
			//Now what?????
		&#125;
	&#125;
&#125;

mncArray = new Array()
	// United Kingdom
	mncArray&#1111;"234"] = new Array ()
		mncArray&#1111;"234"]&#1111;0] = "Virgin#00"
		mncArray&#1111;"234"]&#1111;1] = "Virgin 2003 Spec#00001"
		mncArray&#1111;"234"]&#1111;2] = "O2/Bt Cellnet#10"
		mncArray&#1111;"234"]&#1111;3] = "Vodafone#15"
		mncArray&#1111;"234"]&#1111;4] = "T-Mobile/1-2-1#30"
		mncArray&#1111;"234"]&#1111;5] = "Orange#33"
		mncArray&#1111;"234"]&#1111;6] = "Jersey Telecom GSM#50"
		mncArray&#1111;"234"]&#1111;7] = "Guernsey Telecoms GSM#55"
		mncArray&#1111;"234"]&#1111;8] = "Manx Telecom Pronto GSM#58"
// -->
</script>
</head>
<body>
<form name="details">
<select name="mcc" id="mcc" onChange="updateForm1(this)">
	<option value="276">Albania</option>
	<option value="603">Algeria</option>
	<option value="213">Andorra</option>
	<option value="283">Armenia</option>
	<option value="505">Australia</option>
	<option value="232">Austria</option>
	<option value="400">Azerbaijan</option>
	<option value="426">Bahrain</option>
	<option value="470">Bangladesh</option>
	<option value="206">Belgium</option>
	<option value="218">Bosnia Herzegovina</option>
	<option value="652">Botswana</option>
	<option value="528">Brunei Darussalam</option>
	<option value="284">Bulgaraia</option>
	<option value="724">Brazil</option>
	<option value="456">Cambodia</option>
	<option value="624">Cameroon</option>
	<option value="302">Canada</option>
	<option value="625">Cape Verde</option>
	<option value="730">Chile</option>
	<option value="460">China</option>
	<option value="612">Cote d'Ivoire</option>
	<option value="219">Croatia</option>
	<option value="280">Cyprus</option>
	<option value="230">Czech Republic</option>
	<option value="238">Denmark</option>
	<option value="602">Egypt</option>
	<option value="248">Estonia</option>
	<option value="636">Ethiopia</option>
	<option value="542">Fiji</option>
	<option value="244">Finland</option>
	<option value="208">France</option>
	<option value="547">French Polynesia</option>
	<option value="340">French West Indies</option>
	<option value="282">Georgia</option>
	<option value="262">Germany</option>
	<option value="620">Ghana</option>
	<option value="266">Gibraltar</option>
	<option value="202">Greece</option>
	<option value="290">Greenland</option>
	<option value="611">Guinea</option>
	<option value="454">Hong Kong</option>
	<option value="216">Hungary</option>
	<option value="274">Iceland</option>
	<option value="404">India</option>
	<option value="510">Indonesia</option>
	<option value="432">Iran</option>
	<option value="418">Iraq</option>
	<option value="272">Ireland</option>
	<option value="425">Israel</option>
	<option value="222">Italy</option>
	<option value="416">Jordan</option>
	<option value="419">Kuwait</option>
	<option value="437">Kyrgyz Republic</option>
	<option value="457">Lao</option>
	<option value="247">Latvia</option>
	<option value="415">Lebanon</option>
	<option value="651">Lesotho</option>
	<option value="618">Liberia</option>
	<option value="246">Lithuania</option>
	<option value="270">Luxembourg</option>
	<option value="455">Macau</option>
	<option value="294">Macedonia</option>
	<option value="646">Madagascar</option>
	<option value="650">Malawi</option>
	<option value="502">Malaysia</option>
	<option value="278">Malta</option>
	<option value="617">Mauritius</option>
	<option value="259">Moldova</option>
	<option value="604">Morocco</option>
	<option value="634">Mozambique</option>
	<option value="649">Namibia</option>
	<option value="204">Netherlands</option>
	<option value="546">New Caledonia</option>
	<option value="530">New Zealand</option>
	<option value="242">Norway</option>
	<option value="422">Oman</option>
	<option value="410">Pakistan</option>
	<option value="310">Papua New Guinea</option>
	<option value="515">Philippines</option>
	<option value="260">Poland</option>
	<option value="268">Portugal</option>
	<option value="427">Qatar</option>
	<option value="647">Reunion</option>
	<option value="226">Romania</option>
	<option value="250">Russia</option>
	<option value="635">Rwanda</option>
	<option value="420">Saudi Arabia</option>
	<option value="608">Senegal</option>
	<option value="633">Seychelles</option>
	<option value="525">Singapore</option>
	<option value="231">Slovak Republic</option>
	<option value="293">Slovenia</option>
	<option value="655">South Africa</option>
	<option value="214">Spain</option>
	<option value="413">Sri Lanka</option>
	<option value="634">Sudan</option>
	<option value="240">Sweden</option>
	<option value="228">Switzerland</option>
	<option value="417">Syria</option>
	<option value="466">Taiwan</option>
	<option value="640">Tanzania</option>
	<option value="520">Thailand</option>
	<option value="615">Togo</option>
	<option value="605">Tunisia</option>
	<option value="286">Turkey</option>
	<option value="310">USA</option>
	<option value="641">Uganda</option>
	<option value="255">Ukraine</option>
	<option value="424">United Arab Emirates</option>
	<option value="234">United Kingdom</option>
	<option value="434">Uzbekistan</option>
	<option value="734">Venezuela</option>
	<option value="452">Vietnam</option>
	<option value="220">Yugoslavia</option>
	<option value="645">Zambia</option>
	<option value="648">Zimbabwe</option>	
</select>
<p>
<select name="mnc" id="mnc">
	<option value="">Select provider</option>
</select>
<p>
<input type="text" name="mccmnc" id="mccmnc" value="">
</form>

</body>
</html>

Posted: Tue Nov 30, 2004 9:07 am
by Chris Corbyn
problem solved....

Code: Select all

document.getElementById(optionId).text = net
document.getElementById(optionId).value = mnc