Parents 50th Wedding Anniversary Speech From Son

Carga dinámica de un <select> con jQuery

Often we want to provide options depending on options selected above. The way to do this in HTML is to send a first form with the initial selection and when this has been completed, showing a second form with the next option.
For example: \u0026lt;form

 id='ubicacion'> 
 \u0026lt;label for="continente"> Continent: \u0026lt;/ label> 
 \u0026lt;select name="continente" id="continente"> ; 
 \u0026lt;option value="Latinoamerica"> Latin America \u0026lt;/ option> \u0026lt;option 
 selected value="Europa"> Europe \u0026lt;/ option> \u0026lt;option value="Asia"> 
 Asia \u0026lt;/ option> \u0026lt;option value="Norteamerica"> 
 North America \u0026lt;/ option> 
 value="Africa"> \u0026lt;option Africa \u0026lt;/ option> 
 \u0026lt;/ select> \u0026lt;input type="submit" 
 id="continuar" 
 value="continuar 
 »" /> \u0026lt;/ form> ; 
 

Pressing continue the server has the information you need to send the following view specific information associated with the first entered value. What we do now using AJAX through JQuery is dynamically modify this form will create a second selector with dependent options, then removing the button whose function was to find the next term view and include a submit button that belongs intermediate to that view and we will not show here.

 continent var = $ ('# continent'). Val (); 
 / / We use a variable name with $ to remind 
 / / which is a jQuery selection 
 var $ selCiudad = $ ('# city'); 
 / / If the switch is not this what we added, 
 / / and change the button 
 if ($ selCiudad.size () == 0) {
 $ ('# next'). remove (); 
 $ ('\u0026lt;label for = "city"> City: \u0026lt;/ label> '+ 
' \u0026lt;select id="ciudad" name="ciudad"> \u0026lt;/ select> '+ 
' \u0026lt;input type = "submit" value = " send "" /> ') 
. appendTo (' # location '); 
 $ selCiudad = $ (' # city ');} 
 selCiudad.load 
 $ (' selector-'+ continent +'. html ') ; 
}); 
 

The method call dynamically loaded jQuery load the options of cities to the second switch based on the value of the selection by continent. Related

• Populate Select Boxes, jQuery for Designers, 11/02/2011

Related Courses Course

• basic AJAX JQuery