[英]Selecting a value from drop down changes the next drop down list
嗨,大家好我是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-California 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函数来收集在“ form [city]”中选择的选项并将F,L,U,S字符附加到“ form [city]”选择标记的前两个字符中选择标签->表单[cityselected]。
提前谢谢
检查一下: 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);
}
我还没有测试过,但这是一般性的想法……这完全取决于您的确切问题。
请注意,在选择html中添加了onSelect ...这是我更改过的唯一html
<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)
}
}
尝试这个
$('#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);
)};
在这里摆弄
下面是示例:我假设您了解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>");
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.