How do I hide select options after or before selected?-CodePudding

I have a problem with 2 select dropdowns, these 2 select dropdowns both range from 1 to 10 my problem is that I'm trying to work out how to disable certain options upon selecting an option.

For instance, If I select 4 from select A then in select B it would need to hide 5,6,7,8,9,10 and only show 1,2,3. If I was to select 8 from Select A then select B would hide 9,10 and show 1,2,3,4,5,6,7, and so on, Im thinking nth-child but how would you hide it dynamically?

Would I need to grab all the options first then simply find the one im looking for then hide the rest and rebuild the select form or is there a simpler solution,

Any help would be greatly appreciated.

$('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>

CodePudding user response：

On change of A
1. Get all the options in B
2. Filter on those's values larger then the selText
3. Loop over the resulting node list
4. Disabled them

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

Small improvement, instead of $(this).find("option:selected").text() use the event to get the selected value: 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>