Question

是否可以根据第一个下拉框中的值动态填充第二个下拉框。

<select name="category">
    <option value="0">None</option>
    <option value="1" rel="accessories">Cellphones</option>
    <option value="2" rel="sports">Sports</option>
    <option value="3" rel="cars">Cars</option>
</select>

<select name="items" class="cascade">
    <option value="3" class="accessories">Smartphone</option>
    <option value="8" class="accessories">Charger</option>
    <option value="1" class="sports">Basketball</option>
    <option value="4" class="sports">Volleyball</option>
    <option value="6" class="cars">Corvette</option>
    <option value="2" class="cars">Monte Carloe</option>
</select>

Answer 1

是的，这是可能的。使用jquery看起来像这样：

$('select[name="category"]').on('change',function() {
   // hide everything
   $('select[name="items"] option').hide();
   // show matching items
   $('select[name="items"]  .'+$(this).find(":selected").attr('rel')).show();
   // make the top one selected
   $('select[name="items"]  .'+$(this).find(":selected").attr('rel')).first().attr('selected','selected');
});

如果您想更加动态地提取列表，可以使用上述作为起点，但使用ajax调用填写选项，而不是列出所有选项并隐藏/显示。

需要动态填充第二个下拉框

1 个答案: