如何在選擇之后或之前隱藏選擇選項？-有解無憂

我有 2 個選擇下拉選單的問題，這 2 個選擇下拉選單的范圍都從 1 到 10 我的問題是我正在嘗試解決如何在選擇一個選項時禁用某些選項。

例如，如果我從選擇 A 中選擇 4，那么在選擇 B 中，它需要隱藏 5、6、7、8、9、10 并且只顯示 1、2、3。如果我要從 Select A 中選擇 8，那么選擇 B 將隱藏 9,10 并顯示 1,2,3,4,5,6,7，依此類推，我在想 nth-child 但你會如何動態隱藏它？

我是否需要先獲取所有選項，然后簡單地找到我正在尋找的選項，然后隱藏其余選項并重建選擇表單，或者是否有更簡單的解決方案，

任何幫助將不勝感激。

如何在選擇之后或之前隱藏選擇選項？

$('select[name="A"]').on('change', function() {
    var selText = $(this).find("option:selected").text();
    
    $('select[name="B"] option:contains('   selText   ')').hide();
});

label {
    margin: 10px;
    display: block;
}
select {
    width: 100%;
    padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
    Select A:
    <select name="selectA">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
    </select>
</label>

<label>
    Select B:
    <select name="selectA">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
    </select>
</label>

uj5u.com熱心網友回復：

關于改變A
1. 獲取所有選項B
2. 過濾那些大于的值selText
3. 回圈生成的節點串列
4. 禁用它們

$('select[name="selectB"] > option')
    .filter(e => e >= selText)
    .each((i, e) => e.disabled = true);

小改進，而不是$(this).find("option:selected").text()使用event來獲取選定的值：event.target.value

$('select[name="selectA"]').on('change', function() {
    var selText = event.target.value;
    $('select[name="selectB"] > option')
        .filter(e => e >= selText)
        .each((i, e) => e.disabled = true);
});

label {
    margin: 10px;
    display: block;
}
select {
    width: 100%;
    padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
    Select A:
    <select name="selectA">
        <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
    </select>
</label>

<label>
    Select B:
    <select name="selectB">
        <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
    </select>
</label>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441182.html

標籤：jQuery

上一篇：每頁隨機顯示最多3個區塊

下一篇：克隆多個Dropbox選定選項并將它們組合到1個附加檔案中