-1

2 つの選択要素があります。最初から「二輪車」を選択すると<select>、次のリストが自動で有効化されて「二輪車」が表示されるようにしたいです。

どうすればそれを可能にできますか？

これは私のコードです。

<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 を使用して行われます。

4

3 に答える 3

3

これをチェックして：

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

フィドル

于 2013-08-02T07:03:10.147 に答える
3

最初の選択での選択に基づいて、2 番目の選択で無効なオプションを無効にすることで、これを行うことができます。この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);
});
于 2013-08-02T07:11:26.513 に答える