/    Sign up×
Community /Pin to ProfileBookmark

2 Level Interdependent Select List

Copy linkTweet thisAlerts:
Aug 17.2011

I am working on creating a 2 Level Interdependent Select List and I am using javascriptkit.com’s code they provided.

[code=html]
<form name=”classic”>
<select name=”styles” size=”1″ onChange=”updatecolors(this.selectedIndex)” style=”width: 150px”>
<option selected>Select A City</option>
<option value=”usa”>USA</option>
<option value=”canada”>Canada</option>
<option value=”uk”>United Kingdom</option>
</select>

<select name=”colors” size=”1″ style=”width: 150px”>
</select>
</form>

<script type=”text/javascript”>

var styleslist=document.classic.styles
var colorslist=document.classic.colors

var colors=new Array()
colors[0]=””
colors[1]=[“New York|newyorkvalue”, “Los Angeles|loangelesvalue”, “Chicago|chicagovalue”, “Houston|houstonvalue”, “Austin|austinvalue”]
colors[2]=[“Vancouver|vancouvervalue”, “Tonronto|torontovalue”, “Montreal|montrealvalue”, “Calgary|calgaryvalue”]
colors[3]=[“London|londonvalue”, “Glasgow|glasgowsvalue”, “Manchester|manchestervalue”, “Edinburgh|edinburghvalue”, “Birmingham|birminghamvalue”]

function updatecolors(selectedcolorsgroup){
colorslist.options.length=0
if (selectedcolorsgroup>0){
for (i=0; i<colors[selectedcolorsgroup].length; i++)
colorslist.options[colorslist.options.length]=new Option(colors[selectedcolorsgroup][i].split(“|”)[0], colors[selectedcolorsgroup][i].split(“|”)[1])
}
}

</script>

[/code]

Which is working to they way they said it would. I am trying to make a modification to it to which I have on idea where to start as i know very little javascript.

Basically what I want to do is delete the <option selected>Select A City</option> from the first select field and make it where when you first see the field it displays the USA option.

Since the USA option will be the on that is showing when you enter the page I don’t want second select field to be blank but instead show the cities of the USA. Then if they choose to select on Canada it would delete the USA cities and just show the canadian cities like it is already doing.

Anyone know how I can achieve this?

Thanks so much for all your help!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@twseitexAug 17.2011 — Hi,

<form ID="idIfForm" name="classic">

var objForm=document.getElementById("idIfForm"); // HTML DOM function

-----------------------------

<select name="styles" size="1" onChange="updatecolors(this.selectedIndex)" style="width: 150px">

var objSelect=objForm.elements("styles");


<select ID="idOfSelect" name="styles" size="1" onChange="updatecolors(this.selectedIndex)" style="width: 150px">

var objSelect=document.getElementById("idOfSelect"); // HTML DOM function


-----------------------------

<option name="SelectACity" selected>Select A City</option>

var objSelectACity=objForm.elements("SelectACity");

objSelectACity.value=""; // empty vlaue

objForm.removeChild(objSelectACity); // delete object in tree


--------------------------------------

removeChild Method see http://msdn.microsoft.com/en-us/library/ms536702.aspx

object form see http://msdn.microsoft.com/en-us/library/ms535249.aspx

object select see http://msdn.microsoft.com/en-us/library/ms535893.aspx

object option see http://msdn.microsoft.com/en-us/library/ms535877.aspx

elements Collection see http://msdn.microsoft.com/en-us/library/ms537449.aspx
Copy linkTweet thisAlerts:
@1105designsauthorAug 19.2011 — Hi,

<form ID="idIfForm" name="classic">

var objForm=document.getElementById("idIfForm"); // HTML DOM function

-----------------------------

<select name="styles" size="1" onChange="updatecolors(this.selectedIndex)" style="width: 150px">

var objSelect=objForm.elements("styles");


<select ID="idOfSelect" name="styles" size="1" onChange="updatecolors(this.selectedIndex)" style="width: 150px">

var objSelect=document.getElementById("idOfSelect"); // HTML DOM function


-----------------------------

<option name="SelectACity" selected>Select A City</option>

var objSelectACity=objForm.elements("SelectACity");

objSelectACity.value=""; // empty vlaue

objForm.removeChild(objSelectACity); // delete object in tree


--------------------------------------

removeChild Method see http://msdn.microsoft.com/en-us/library/ms536702.aspx

object form see http://msdn.microsoft.com/en-us/library/ms535249.aspx

object select see http://msdn.microsoft.com/en-us/library/ms535893.aspx

object option see http://msdn.microsoft.com/en-us/library/ms535877.aspx

elements Collection see http://msdn.microsoft.com/en-us/library/ms537449.aspx[/QUOTE]

Thanks for your reply... I'm sorry but what you are speaking is french to me. What are you saying I need to change in my code to make it work how I'm wanting to? Thanks!
Copy linkTweet thisAlerts:
@JMRKERAug 19.2011 — Consider these minor changes from your original post. ?
<i>
</i>&lt;form name="classic"&gt;
&lt;select name="styles" onChange="updatecolors(this.selectedIndex)"
size="1" style="width: 150px"&gt;
&lt;option selected value="usa"&gt;USA&lt;/option&gt;
&lt;option value="canada"&gt;Canada&lt;/option&gt;
&lt;option value="uk"&gt;United Kingdom&lt;/option&gt;
&lt;/select&gt;
&lt;select name="colors" size="1" style="width: 150px"&gt;&lt;/select&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;

var styleslist=document.classic.styles
var colorslist=document.classic.colors

var colors=new Array()
colors[0]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
colors[1]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
colors[2]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]

function updatecolors(selectedcolorsgroup){
colorslist.options.length=0
if (selectedcolorsgroup&gt;=0){
for (i=0; i&lt;colors[selectedcolorsgroup].length; i++)
colorslist.options[colorslist.options.length]
= new Option(colors[selectedcolorsgroup][i].split("|")[0],
colors[selectedcolorsgroup][i].split("|")[1])
}
}

window.onload = function() {
updatecolors(0)
}
&lt;/script&gt;

Closer to what you want? ?
Copy linkTweet thisAlerts:
@twseitexAug 21.2011 — Hi,

my comments explain using of collection or alternate HTML DOM function

-------------------------------------------

if you want delete an option <option selected>Select A City</option> you must use HTML DOM function

<option name="SelectACity" selected>Select A City</option>

var objSelectACity=objForm.elements("SelectACity");

objSelectACity.value=""; // empty vlaue but not delete, collection possible too

objForm.removeChild(objSelectACity); // HTML DOM function for delete object in tree of HTML DOM


--------------------------------------------

links of microsoft only if you nee help to HTML DOM object or objForm.removeChild()
Copy linkTweet thisAlerts:
@JMRKERAug 21.2011 — Hi,

my comments explain using of collection or alternate HTML DOM function

-------------------------------------------

if you want delete an option <option selected>Select A City</option> you must use HTML DOM function

<option name="SelectACity" selected>Select A City</option>

var objSelectACity=objForm.elements("SelectACity");

objSelectACity.value=""; // empty vlaue but not delete, collection possible too

objForm.removeChild(objSelectACity); // HTML DOM function for delete object in tree of HTML DOM


--------------------------------------------

links of microsoft only if you nee help to HTML DOM object or objForm.removeChild()[/QUOTE]

No need for that, look at post #4 again.

?
×

Success!

Help @1105designs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...