使用 ajax 操纵 Select 选项

Question

让我们承认我们有两个 selects

<select id=first>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select id=second>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

我希望第二个 select 不应该提供比第一个 select 中的 selected 值更大的值，所以如果例如在第一个 [=24] =] 我 select 编辑 3 然后第二个 select 应该提供

<select id=second>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

所以我是这样的:

    $(#first).on('change', function() {
        var min = $(#first).val();
        for (let i = 1; i <= min; i++) {
           $(#second).append('<option value=' + i + '>' + i + '</option>'); 
        } 
    });

但这会附加选项。我想替换选项。

Answer 1

您可以先使用 .empty() 删除所有 <option> 标签，然后循环添加新的 <option> 标签：

    $('#first').on('change', function() {
        $('#second').empty();
        var min = $('#first').val();
        for (let i = 1; i <= min; i++) {
            $('#second').append('<option value=' + i + '>' + i + '</option>');
        }
    });

Answer 2

存储一组选项并过滤该组以替换现有选项的不同方法

const $storedOpts = $('#second option').clone()

$('#first').change(function(){
    const $opts = $storedOpts .clone().filter((i,el) => el.value <= this.value)
    $('#second').html($opts);      
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id=first>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select id=second>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

使用 ajax 操纵 Select 选项

Manipulate Select options with ajax

javascript

ajax