/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] uncaught exceptions?

Hmm, I’m trying to remove elements from a drop-down box based on the selectedIndex of another. Here’s what I’ve got so far:

[code]
function removeWrongColor(value) {
var color = document.getElementById(“colors”);
switch (value) {
case ‘red_delicious’:
color.remove(color.selectedIndex = 0);
color.remove(color.selectedIndex = 2);
color.remove(color.selectedIndex = 3);
break;
case ‘granny_smith’:
color.remove(color.selectedIndex = 0);
color.remove(color.selectedIndex = 1);
color.remove(color.selectedIndex = 2);
break;
case ‘gala’:
color.remove(color.selectedIndex = 0);
color.remove(color.selectedIndex = 1);
color.remove(color.selectedIndex = 3);
break;
}
}

<select id=”appleTypes” onchange=”removeWrongColor(value)”>
<option value=”none” selected=”selected”></option>
<option value=”red_delicious”>red delicious</option>
<option value=”granny_smith”>granny smith</option>
<option value=”gala”>gala</option>
</select>
<select id=”colors”>
<option value=”none” selected=”selected”></option>
<option value=”red”>red</option>
<option value=”yellow”>yellow</option>
<option value=”green”>green</option>
</select>
[/code]

As I run this in my browser (FF 3.0b5/Linux) and make my selection, it doesn’t remove all of the elements that I’m expecting from the other drop-down box. The ‘error console’ also says something about an ‘uncaught exception’. Am I doing something wrong?

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@ZeroKilledMay 08.2008 — it is throwing the error of uncaught exception because you are removing an item that doesn't exist. once you remove an item, the index change. for example, if you have four items on the select box and you want to retain the second item, you remove the rest as follow:
<i>
</i>select.remove(0); // now select contain 3 three items where the first item become the item you want to retain;
select.remove(1); // select contain 2 items;
select.remove(1); // select contain 1 item, the one you want to retain;

if instead, on the third line i has passed the number 2 ([b]select.remove(2);[/b]), then the console throw the error, because that item doesn't exist.
Copy linkTweet thisAlerts:
@frijolieauthorMay 08.2008 — Thanks! That was it. I guess if I was trying to access an element that didn't exist, I would have gotten an "index out of bounds" exception or something similar. The indexes are stored in an array aren't they? I guess the error message could have been a little more descriptive to help with debugging/error checking.

You've been helping me on a few problems, thanks. Just as your signature states, Javascript is your language. You're quite the guru!

Until I get stuck again...
Copy linkTweet thisAlerts:
@frijolieauthorMay 08.2008 — I spoke too soon, now I've noticed that the options don't repopulate if the user changes the original (dependent) selectbox (e.g. type of apple). Say, I choose red_delicious apple on the first time around. If all goes well, all colors would be removed except for red. Now, if you change the selectbox to say a "gala" apple, all that's left in the color dropdown is still 'red'. How can you add back all of those original colors inside the dropdown list?
Copy linkTweet thisAlerts:
@ZeroKilledMay 09.2008 — back again.

first of all, i'm having a hard time trying to figure out a clean and great design of code for this kind of technique, dynamic select box. be aware that there're various solution, from client-side to server-side, and ajax. however, sample that follow is based on client-side solution. perhaps you are interested in the article about [url=http://www.quirksmode.org/js/options.html]dynamic options[/url] for more detail in what involve the technique.

basically what you need are three main component: select element, a function to populate the select, and sort of a database that hold a pair of name/value. i recommend you to read the article and compare the explained script with the following sample. the code work fine and i like the idea of having them like hierarchical object, but don't like the way it is designed. hope you grasp an idea.

[code=html]
<script type='text/javascript'>
function $(id){
return document.getElementById(id);
}

function populate(select, options){
while(select.length) select.remove(0);
for(var i = 0; i < options.length; i++){
var option = options[i].split(/:s?/);
select.add(new Option(option[0], option[1]), null);
}
}

var fruit = {
//options: ['apple:apple', 'banana:banana', 'grape:grape'],
apple:{
options:['red:red', 'yellow:yellow', 'green:green'],
red:{options:['US:us']},
yellow:{options:['US:us', 'Mexico:mx']},
green:{options:['Chile:ch']}
},
banana:{
options:['green:green', 'yellow:yellow', 'brown:brown'],
green:{options:['PuertoRico:pr', 'Uruguay:ug']},
yellow:{options:['France:fr', 'China:cn', 'Africa:ac']},
brown:{options:['', '', '']}
},
grape:{
options:['purple:purple', 'green:green', 'red:red'],
purple:{options:['Europe:eu', 'Argentina:ar']},
green:{options:['USA:us', 'Panama:pm']},
red:{options:['Spain:es']}
}
};
</script>

<p>Fruit: <select onchange='populate($("color"), fruit[value].options);' id='fruits'>
<option value='apple'>apple</option>
<option value='banana'>banana</option>
<option value='grape'>grape</option>
</select></p>

<p>Color: <select onchange='populate($("country"), fruit[$("fruits").value][value].options);' id='color'></select></p>
<p>Country: <select onchange='' id='country'></select></p>

[/code]
Copy linkTweet thisAlerts:
@frijolieauthorMay 09.2008 — whoa! that's a bit over my head. I'll check it out and try and piece together the syntax and logic. Meanwhile, I've kinda figured a little of it out already. It's sloppy code but so far it's working...
×

Success!

Help @frijolie 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 6.15,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...