从下拉列表中选择一个值会更改下一个下拉列表

嗨，大家好我是Ruby on Rails开发人员，对JavaScript或Jquery不了解。从下拉列表中选择一个值会更改下一个下拉列表

我有这样的选择标记：

<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>

当用户选择例如CA - 加利福尼亚PD从上述选择标签，接下来的选择标签，其将在下文中它应具有一个下拉列表是这样的：

<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>

因此，一个Javascript或JQuery的功能必须被用于收集在所选择的选项“的形式[城市]”和附加F，L，U，S字符“form [city]”的前两个字符为第二个选择标签 - > form [cityselected]选择标签。

感谢很多提前

来源

2013-01-22 Supersonic

检查这个唯一的HTML：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); 
}

来源

2013-01-22 07:59:47

这工作完全正常，我的感谢，是有办法在末尾 – Supersonic

的文本字段中显示所选的“form_cityselected”我没有正确地得到问题。就像你在寻找什么？ http://jsfiddle.net/Q8NW5/1/ –

几乎在那里，我需要输出选定的第二个值，即“form_cityselected”到文本字段。你现在提供的那个输出一个标签，但问题是它不能识别你需要手动选择它的“form_cityselected”的第一个选定值，直到它显示在标签上 – Supersonic

我没有测试过这一点，但这是一般的想法......这是非常具体的您的具体问题。

请注意，在选择HTML加ONSELECT的...这是我改变

<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) 
    } 

}

来源

2013-01-22 07:49:42

试试这个

$('#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这里

来源

2013-01-22 07:50:37 bipen

你忘在他的初始值的空间之前，解析出只是个字符 –

确定..感谢..将更新它.. – bipen

下面是这个例子：我想你知道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>"); 
      } 
      } 

      }

来源

2013-01-22 08:01:51

从下拉列表中选择一个值会更改下一个下拉列表

回答

相关问题