Change items of one SelectBox based on current selection of another SelectBox

Question

0.00/5 (No votes)

See more:

Hi!

The process is as follows:

The selected element in one Selectbox should only popup the associated elements with that selected item in another select box.
I am having a hard time trying to resolve this issue.

Any help would be appreciated.

Thanks!

Posted 6-Dec-10 4:22am

khanishfaq82

Updated 6-Dec-10 4:39am

Manfred Rudolf Bihy

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manfred Rudolf Bihy · Answer 1 · 2010-12-06T04:36:00

Solution 1

Hi Khan,

I would proceed like this:

A1. Setup event handler (javascript) for when selection of selectbox A changes
A2. In that event handler make an AJAX request using the selected item of select box A (should be possible with jQuery) and in the success event handler of that AJAX object set selectbox B to the elements you received from the server.

or this scenario:

B1. hard code in JS which elements are to appear in SelectBox B for every element in SelectBox A. This can be achieved by using a hash.
B2. see A1
B3. In event handler check value of current selection and look up array of elements for SelectBox B. Fill SelectBox B with said elements.

Cheers,

Manfred

Posted 6-Dec-10 4:36am

Manfred Rudolf Bihy

Comments

khanishfaq82 7-Dec-10 2:47am

Thanks Manfred.
I tried the same but it is working in firefox but not working in IE(All Versions).

Here is the code which i used:
<script>
function mySelected(jobFamID) {
$("#"+jobFamID).click(function(){
var elSelected = $(this).children("option:selected");
$(elSelected).each(function() {
var id = $(this).attr("value");
var self = this;
$(self).click(function() {

$("#selectbox").children("option").each(function(){
if ($(this).attr("title") == id) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
});
}
</script>
//This is the selectbox in which the contents will be. And on selection of one of the elements from this selectbox the list in another selectbox should be filtered.

<select style="background-color:#FFC; color:#C03; font-weight:bold;width:300px" multiple size="10" name="selectbox4[]" id="selectbox4" önChange="mySelected(this.id)">

//This is the selectbox which contains the default positions which have to be filtered.

<select multiple name="selectbox[]" id="selectbox" size="10" style="width:300px" önDblClick="slide()">
totalrows;$i++)
{
?>
<option style="background-color:#FFC;" title="" id="sesscursor[$i]['family_code'];?>" value="sesscursor[$i]['job_code'];?>">sesscursor[$i]['job_desc']." - ". $postList->sesscursor[$i]['job_code'];?></style></option>

</select>

Manfred Rudolf Bihy 7-Dec-10 6:23am

What is the issue in IE? Does it produce any errors?

khanishfaq82 8-Dec-10 7:01am

Dear Manfred..
What i realize at the end of the day is that IE does not support the hiding property on the <OPTION> tags of a <SELECT> statement. That was the issue.
But Alhamdulillah managed to break through a way so that it works the same way as required but you can say that the coding part became very complex. :-)
Thanks for your time.