Sélectionner une valeur à partir de la liste déroulante change la liste déroulante suivante

Question

Salut les gars Je suis développeur de ruby ​​on rails et je n'ai aucune idée de javascript ou de Jquery.

j'ai une balise select comme ceci:

<select name="form[city]" id="form_city"> 
    <option value="">Select Office</option> 
    <option value="WA - Washington PD">WA - Washington PD</option> 
    <option value="CA - California PD">CA - California PD</option> 
    <option value="NY - NewYork PD">NY - NewYork PD</option> 
</select> 

Lorsqu'un utilisateur sélectionne par exemple CA - California PD de la balise select ci-dessus, la prochaine balise select qui sera en dessous devrait avoir une liste déroulante comme ceci:

<select name="form[cityselected]" id="form_cityselected"> 
    <option value="CAF">CAF</option> 
    <option value="CAL">CAL</option> 
    <option value="CAU">CAU</option> 
    <option value="CAS">CAS</option> 
</select> 

Ainsi, une fonction Javascript ou JQuery doit être utilisé pour recueillir l'option sélectionnée dans « forme [ville] » et à ajouter F, l, U, S caractères à les deux premiers caractères de "form [city]" sélectionnent la balise à la deuxième balise select -> form [cityselected].

Merci beaucoup à l'avance

Answer 1

Vérifiez ceci: http://jsfiddle.net/Q8NW5/

$('#form_city').on('change', function (e) { 
var val = $(':selected', $(this)).val(), 
    val = val.split('-')[0], 
    val = val.replace(/\s+/g, ''), 
    char = ['F', 'L', 'U', 'S'], 
    tpl = '<option val="{val}">{val}</option>', 
    html = ''; 

$(char).each(function (item, value) { 
    var opt = val + value; 
    html += tpl.replace(/{val}/g, opt); 
}); 

$('#form_cityselected').html(html).show(); 
$('#form_final_city').show(); 

var currCity = $('#form_cityselected option:selected').val(); 
setCity(currCity); 

}) 

$('#form_cityselected').on('change', function() { 
    var val = $(':selected', $(this)).val(); 
    setCity(val); 
}); 

function setCity(city) { 
    $('#form_final_city').val(city); 
} 

Answer 2

Je ne l'ai pas testé, mais c'est l'idée générale ... il est très spécifique à votre question précise.

Notez l'ajout de onSelect dans la sélection html ... qui est le seul html j'ai changé

<select name="form[city]" id="form_city" onSelect="updateOtherSelect(this)"> 
     <option value="">Select Office</option> 
     <option value="WA - Washington PD">WA - Washington PD</option> 
     <option value="CA - California PD">CA - California PD</option> 
     <option value="NY - NewYork PD">NY - NewYork PD</option> 
    </select> 

function updateOtherSelect(select){ 
    //grab just what happens before the first space in your option's value 
    var prefix = select.options[select.selectedIndex].value.split(" ")[0]; 

    //go through all your second drop down values and append, based on the string FLUS (if I understood your question correctly). 
    for(i=0; i< document.getItemById("form_cityselected").options.length && i < "FLUS".length; i++){ 
     document.getItemById("form_cityselected").options[i].value = prefix + "FLUS".charAt(i) 
    } 

} 

Answer 3

essayer

$('#form_city').change(function(){ 
    var cityselectedobj= $('#form_cityselected'); 
    cityselectedobj.empty() 
    var val=$(this).val(); 
    var text=val.split(' ')[0]; 
    $('<option>').val(val + 'F').text(text+ 'F').appendTo(cityselectedobj); 
    $('<option>').val(val + 'L').text(text+ 'L').appendTo(cityselectedobj); 
    $('<option>').val(val + 'U').text(text+ 'U').appendTo(cityselectedobj); 
    $('<option>').val(val + 'S').text(text+ 'S').appendTo(cityselectedobj); 
)}; 

fiddle ici

Answer 4

Voici l'exemple: Je suppose que vous connaissez les bases de Jquery.

$("#form_city").change(function() { 
    // TODO 
filltheVillagecomboBox(villageStrings);//village strings seperatedBy '|' 

}); 


function filltheVillagecomboBox(villagesStrings){ 
      if(villagesStrings !=null){ 
       var villagesStrings = villagesStrings.split('|'); 

       box.append("<option value='null'>Please select your village</option>"); 

       for (var i = 0, l = villagesStrings.length-1; i <l; i++){ 
        var id =villagesStrings[i].substring(0,2); 
        var village=villagesStrings[i].substring(0,villagesStrings[i].length) 
        $("#form_village").append("<option value="+village+">"+village+"</option>"); 
      } 
      } 

      }