javascript - 使用jquery选择项目时的多个下拉列表验证

Question

我有两个选择元素。如果从第一个中选择“2 Wheeler” <select>，我希望自动验证下一个列表并显示“2 Wheeler”。

我怎样才能做到这一点？

这是我的代码；

<form method="post" id="target">
 <select id ="selected1" name="expenseType" class="dynamic_select" >
     <option value="0">-select-vehicle-type-</option>
     <option value="1">2 Wheeler</option>
     <option value="2">4 Wheeler</option>    
 </select> 
  <select id ="selected2" name="expenseType" class="dynamic_select" >
     <option value="0">-select-Parts-</option>
     <option value="1">2 wheels and Parts</option>
     <option value="2">4 wheels and Parts</option>
 </select> 
 <input type="submit" value="submit"/>
</form>

验证是使用 jQuery 完成的。

Answer 1

这很简单，因为您已经在使用 jQuery；

  $("#selected1").change(function(){
      $("#selected2").val($(this).val());
});

单击此处获取 JS Fiddle http://jsfiddle.net/qjvzw/

Answer 2

检查这个：

HTML：

<select id ="selected1" name="expenseType" class="dynamic_select" >
     <option value="0">-select-vehicle-type-</option>
     <option value="1">2 Wheeler</option>
     <option value="2">4 Wheeler</option>    
</select> 
<select id ="selected2" name="expenseType" class="dynamic_select" >
</select> 
<input type="submit" value="submit"/>

代码：

$(document).ready(function(){
    $('#selected2').append('<option value="0">-select-Parts-</option>');
});


$('#selected1').change(function(){
    $('#selected2 option').each(function(index, option) {
        $(option).remove();
    });
     $('#selected2')
         .append('<option value="0">-select-Parts-</option>');
    if($('#selected1').val() == "1")
    {
        $('#selected2')
         .append('<option value="1">2 wheels and body</option>');
    }
    else if($('#selected1').val() == "2")
    {
        $('#selected2')
        .append('<option value="2">4 wheels and body</option>');
    }
});

小提琴

Answer 3

您可以通过根据第一个选择中的选择禁用第二个选择中无效的选项来做到这一点。看看这个 jsfiddle

使用数据标签来丰富你的 html

<form method="post" id="target">
    <select id="selected1" name="expenseType" class="dynamic_select">
        <option value="0">-select-vehicle-type-</option>
        <option value="1" data-type="data-2wheel">2 Wheeler</option>
        <option value="2" data-type="data-4wheel">4 Wheeler</option>
    </select>
    <select id="selected2" name="expenseType" class="dynamic_select">
        <option value="0">-select-Parts-</option>
        <option value="1" data-2wheel>2 wheels and Parts</option>
        <option value="2" data-4wheel>4 wheels and Parts</option>
    </select>
    <input type="submit" value="submit" />
</form>

然后连接jquery

$('#selected1').on('change', function () {
    var option = $(this).find('option:selected');
    var secondSelect = $('#selected2');

    secondSelect.find('option').prop('disabled', false);
    secondSelect.find('option:not([' + option.data('type') + '])').prop('disabled', true);
});