COMBO BOX in HTML, JAVA SCRIPT

Question

1.00/5 (3 votes)

See more:

I am having two combo boxes in my html page. Based on the value selected in first combo box value I need to load data in second combo box value.(EX - Country and States combo boxes). I am able to populate the values in second combobox properly using Java Script. But my problem is after populating values in 2nd combobox , when I am selecting the value in 2nd combobox , that is not displayed immideatly. Still 2nd combobox is having BLUE empty space. It is not binding the selected value.

But when I change the value in first COmbo box,then the previous value selected in 2nd combo box is getting displayed. I tried many things but dint get any solution. Its very urjent.

Thanks in Advance.

Posted 26-Jul-12 21:34pm

Naveen_143

Updated 28-Dec-17 23:44pm

Add a Solution

Comments

Christian Graus 27-Jul-12 3:50am

Don't worry, I deleted where you (rudely) asked this twice.

Naveen_143 27-Jul-12 4:50am

It was not posted twise intensionally. Due to some network problem it happend.

Naveen_143 9-Aug-12 3:12am

Thanks for deleting. I was trying to do that.

2 solutions

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)

Christian Graus · Answer 1 · 2012-07-26T21:49:00

Solution 1

This is not 'urjent' to us. It's not your right to hassle us to do your job for you, faster.

You can't do this in Javascript and HTML only. Are you using ASP.NET ? In ASP.NET, the page load event fires before your event, and the page prerender fires after. So if you populate your lists in page load, your event is firing and changing the selected index, AFTER you loaded the data. Move that code to prerender.

This is a wild guess based on your incomplete post. Clarify and post code if I am wrong.

Posted 26-Jul-12 21:49pm

Christian Graus

Comments

Naveen_143 27-Jul-12 4:48am

Thanks for your reply. I am not using ASP.Net. Its only HTML pages and java scripts.

Naveen_143 27-Jul-12 4:49am

OnChange function of the first combobox, I am populating the values in second combobox.

Christian Graus 27-Jul-12 5:22am

Why is it urgent, if you're doing it this way ? Why not post your code ?

enhzflep · Answer 2 · 2012-07-27T00:09:00

Before I start, I'm going to echo that which Christian said earlier. It's not very 'urjent' to us at all. This has been combined with a 'thanks in advance' - which may be interpreted by some as an indication that any effort will not be acknowledged after the fact.

For me, the last two sentences of your question spoiled what would otherwise be a-ok. "it's very urjent. Thanks in advance"

Anyway, this isn't terribly difficult. Visit http://www.w3schools.com/js/default.asp[^] often, consider it roughly equivalent to MSDN for all things web-related, though admittedly it's not as comprehensive.

. Try the following:

XML

<!DOCTYPE html>
<html>
  <head>
  <script>
    function byId(e) {return document.getElementById(e);}

    function stateComboChange()
    {
        var combo1 = byId('stateCombo');
        var combo2 = byId('cityCombo');
//      alert(combo1.value);

        emptyCombo(combo2);
        switch(combo1.value)
        {
            case '-1':  addOption(combo2, -1, '-select state first-');
                        break;
            case '0':       addOption(combo2, 0, 'Melbourne');
                        addOption(combo2, 1, 'Horsham');
                        break;
            case '1':       addOption(combo2, 2, 'Sydney');
                        addOption(combo2, 3, 'Bondi');
                        break;
            case '2':       addOption(combo2, 4, 'Hobart');
                        addOption(combo2, 5, 'Port Arthur');
                        break;
        }
        cityComboChange();
    }

    function cityComboChange()
    {
        var combo2, tgt;
        combo2 = byId('cityCombo');
        tgt = byId('tgt');

        tgt.innerHTML = combo2.options[combo2.options.selectedIndex].title;
    }

    function emptyCombo(e)
    {
        e.innerHTML = '';
    }

    function addOption(combo, val, txt)
    {
        var option = document.createElement('option');
        option.value = val;
        option.title = txt;
        option.appendChild(document.createTextNode(txt));
        combo.appendChild(option);
    }

  </script>
  </head>
  <body>
    <select id='stateCombo' onchange='stateComboChange();'>
        <option value='-1' title='-select one-'>-select one-</option>
        <option value='0' title='Vic'>Vic</option>
        <option value='1' title='Nsw'>Nsw</option>
        <option value='2' title='Tas'>Tas</option>
    </select>

    <select id='cityCombo' onchange='cityComboChange();'>
        <option value='-1' title='-select state first-'>-select state first-</option>
    </select>

    <div id='tgt'></div>
</body>
</html>

Edited to add display of city list selected item's text.