using one html page's dropdown list to another html page

Question

I have a main html5 page (main.html) and two another html5 pages(country.html and state.html).

country.html page contains a select dropdown list of 250 countries like below.

<select>
   <option value="1">Afghanistan</option>
   <option value="2">Albania</option>
   .....
   <option value="1">Canary Islands</option>
</select>

state.html contains select dropdown list of states of 250 countries like below

<select id="1">
     <option value="1">Badakhshan</option>
     <option value="1">Badghis</option>
     ............
     <option value="32">Zabol</option>
</select>

<select id="2">
     <option value="33">Badakhshan</option>
     <option value="34">Badghis</option>
     ............
     <option value="68">Vlore</option>
</select>

...............
<select id="250">
     <option value="4902">Saba</option>
     <option value="4903">Sint Eustatius</option>
     ............
     <option value="4915">Western Equatoria</option>
</select>

I have to show dropdown list of all countries in main.html and another dropdown list of all states of selected country from country dropdown list. main.html is like below

<select id="country">
  like to add from country.html
</select>

<select id="state>
  like to add from state.html
</select>

Since it is necessary to show country and state dropdown list more than 5 times so i like to use country.html and state.html. How can i do that? Any help or clue is appreciated. Thanks in advance.

Can be done in both client side and server side. Doing it in server side is less complex than doing it in client side. — Dilantha
– Dilantha, Commented Jul 15, 2013 at 4:29

vladkras · Accepted Answer · 2013-07-15 12:26:23Z

2

main.html

<div id="countries"></div>
<div id="states"></div>

jQuery script

$(document).ready(function() {
    // load select code from country.html
    $('#countries').load('country.html select', function() {
        // when country is selected
        $('#countries select').change(function() {
            // get id
            var countryId = $(this).children('option:selected').val();
            // load select code from state.html by id
            $('#states').load('state.html #'+countryId, function() {
                $('#states select').change(function() {
                    // use the same method to get state id
                    var stateId = $(this).children('option:selected').val();
                });
            });
        });
    });
});

edited Jul 15, 2013 at 12:26

answered Jul 15, 2013 at 4:25

vladkras

17.2k4 gold badges50 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Humayun Kabir Over a year ago

Thank you, it is showing properly but i need to take the value of both dropdown lists to insert database. How can i take the value?

Humayun Kabir Over a year ago

how can i get the id of state. here you show how to catch id of country.

Humayun Kabir Over a year ago

Thank you very much. it is working though i solved it before you sent

Ishan Jain · Accepted Answer · 2013-07-15 05:54:02Z

You can also try for this solution:-

You can make both drop-down html into a java-script function on a java-script file(.js) and Call this java-script file function on page load($(document).ready();).

Example - Make a java-script file Demo.js -

function MakeDropDown() {
     var DropDownHtml = "";
     DropDownHtml = "<select><option value='1'>Afghanistan</option><option value='2'>Albania</option><option value='1'>Canary Islands</option></select>";
     return DropDownHtml;    
  }

Set refrence of Demo.js on Your pages -

<script src="Demo.js" type="text/javascript"></script>

Call MakeDropDown() function on pageload -

$(document).ready(function () {
  alert(MakeDropDown());
  $('#PageDropdown').html(MakeDropDown());
});

Drop-down Html -

<select id="PageDropdown"></select>

Collectives™ on Stack Overflow

using one html page's dropdown list to another html page

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related