(Ajax) Multiple List Box Loading Without Refreshing the Page

[garyrichard]

I want to load three list boxes
where
2nd list box is loaded on the basis of selection of 1st list box
and
3rd list box is loaded on the basis of selection of 2nd list box..

.

[pritaeas]

What do you have so far, and what do you need help with?

[vibhaJ]

Learn from this link and then post if you have issue. http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

[garyrichard]

Thanks for your response..
But in the above example...The list box load very slowly..
and
when i downloaded the code on my system to check
then it doesn't run on any browser....
.
I don't know how it run's in online demo..................
An example of AJAX can be seen at http://www.tatadocomo.com/brand-stores-locator.aspx
___________
Thanks

[veedeoo]

Hi,

Here is the demo I created. Feel free to copy the source code, but make sure to download and save this file as jquery.chained.js. DO NOT hot link the js file from my server that's all I am asking. I will always know if it is hot linked by any sites or ip.

The coding convention is kind of like this....

 <select id="selectOne">
    <option value="optionOne">Option One</option>
    <option value="optionTwo">Option TWo</option>
    <option value="optionThree">Option Three</option>
    </select>

    <!-- create the second select/option block -->
    <!-- pay attention to the class of the option block, it matches the value of the option block above -->
    <select id="chainedToSelectOne">
    <option value="chainedOptionOne" class="optionOne">Choice for Option One</option>
    <option value="chainedOptionTwo" class="optionTwo">Choice for Option Two</option>
    <option value="chainedOptionThree" class="optionThree">Choice for Option Three</option>
    </select>
    <!-- create the third select/option block related to both select/option blocks above -->

    <select id="finalSelect" name="finalChoice">
    <!-- once again, look closely on the class of the option block below. -->
    <option value="finalValueOne" class="chaindedOptionOne optionOne">Final selection for Option One</option>
    <option value="finalValueTwo" class="chainedOptionTwo optionTwo">Final selection for Option Two</option>
    <option value="finalValueThree" class="chainedOptionThree optionThree">Final selection for Option Three</option>
    </select>

    <!-- Now, we need to chained those blocks above -->
    <script type="text/javascript" charset="utf-8">
          $(function(){

            $("#chainedToSelectOne").chained("#selectOne");
            $("#finalSelect").chained("#selectOne, #chainedToSelectOne");
          });
          </script>

That's it.. that should not be too hard to follow.. otherwise, you will have to do some quick javascript language immersion.. if needed.