0

大家好，我是 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 - 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]。

非常感谢提前

4

4 回答 4

3

Check this : 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-22T07:59:47.473 回答
1

下面是示例： 我假设您了解 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-22T08:01:51.667 回答
1

我没有对此进行测试，但这是一般的想法......它非常具体到你的确切问题。

请注意在选择 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)
   }

}
于 2013-01-22T07:49:42.373 回答
1

尝试这个

$('#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);
)};

在这里摆弄

于 2013-01-22T07:50:37.363 回答