Question

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

我怎样才能做到这一点？

这是我的代码;

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

Fiddle

Answer 3

您可以通过根据第一个选择中的选择禁用第二个选择中无效的选项来执行此操作。看看this 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);
});

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

3 个答案: