Question

我使用以下js和html代码来显示列表。主要问题是当子类别＆amp;类别变得很多，类别会发生变化，但子类别会从某个向下的cagory 不显示。 桌面/笔记本电脑出现问题。在移动设备上正常工作。我不是javascript的上帝

<script type="text/javascript">
$(function() {
    $('#vehicle').on('change', function() {
        var vehileType = $('#vehicle').val();

        $('#vehicle-type option').hide();
        $('#vehicle-type option[vehicle="'+vehileType+'"]').show();        
    });
});
</script>

<select id="vehicle" required name="brand">
  <option value="">Select Make</option>
  <option value="ABT">ABT</option>
  <option value="AC">AC</option>
</select>

<select name="model" id="vehicle-type" class="form-control">

 <option vehicle="ABT" value="ABT">ABT</option>
 <option vehicle="ABT" value="ABT1">ABT1</option>

 <option vehicle="AC" value="AC">AC</option>
 <option vehicle="AC" value="AC1">AC1</option>
</select>

Answer 1

首先，我将车辆选项放入自定义变量var vehicleTypeOptions = $('#vehicle-type option[vehicle="' + vehileType + '"]');

然后在演出之后我添加了这个$('#vehicle-type').val(vehicleTypeOptions.first().val());，所以它将设置第一个车辆类型选项的值

我还为.trigger('change')添加了#vehicle，因此它会根据车辆设置设置车辆类型，因此您不必手动设置一个选项

这是一个有效的演示：

＆＃13;

$(function() {
    $('#vehicle').on('change', function() {
        var vehileType = $('#vehicle').val();
        var vehicleTypeOptions = $('#vehicle-type option[vehicle="' + vehileType + '"]');
        
        $('#vehicle-type option').not(vehicleTypeOptions).hide();
        vehicleTypeOptions.show();   
        $('#vehicle-type').val(
        	vehicleTypeOptions.first().val()
        );
    }).trigger('change');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="vehicle" required name="brand">
  <option value="">Select Make</option>
  <option value="ABT">ABT</option>
  <option value="AC">AC</option>
</select>

<select name="model" id="vehicle-type" class="form-control">

 <option vehicle="ABT" value="ABT">ABT</option>
 <option vehicle="ABT" value="ABT1">ABT1</option>

 <option vehicle="AC" value="AC">AC</option>
 <option vehicle="AC" value="AC1">AC1</option>
</select>

＆＃13;

列表根据所选值

1 个答案: