How do I hide select options after or before selected?

March 10, 2022

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>

>Solution :

On change of A
Get all the options in B
Filter on those’s values smaller then the selText
Loop over the resulting node list
Disabled them

FYI; Use event.target.value instead off $(this).find("option:selected").text() to get the selected one.

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

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