Question

Hi and thanks for taking the time to answer my question.

I have a div with two select elements (note that they’re dynamically created and don’t have ids). Both of them contain same option elements (Skill Levels that go from 1 to 5). When a user selects something from the SelectFrom dropbox I the second option (Select To) to only contain the options with value bigger than the selected in the Select From.

If the user selects the default element in the Select From dropbox (with no value) I want to repopulate the Select to with the 5 elements.

I figured out that i’m gonna have a hidden select element with all 5 options and I’m gonna clone those and repopulate the Select to dropbox.

What is the way to go forward. The tricky part is that I don’t have Ids so I’m working with parent() and siblings(). Thanks for your time

Let’s assume this is the HTML:

<div>
<select class="skillsFrom">
<option value="">Please select a value</option>
<option value="1">a</option>
<option value="2">a</option>
<option value="3">a</option>
<option value="4">a</option>
<option value="5">a</option>
</select>
<select class="skillsTo">
<option value="">Please select a value</option>
<option value="1">a</option>
<option value="2">a</option>
<option value="3">a</option>
<option value="4">a</option>
<option value="5">a</option>
</select>
</div>

here’s JS:
//btw helperSelect is a select with the same options as the other two it is just hidden.

('.skillsFrom').bind('change', function(){

            var $optionsSkillLevel = $('#helperSelect option').clone();

            var selectedValue = $(this).val();

            $(this).parent().siblings('.skillsTo').html($optionsSkillLevel);

            if(selectedValue != ''){

            }

        });

And I’m stuck. I’m not sure how to proceed from here. I want to iterate over all elements in Select To and remove those that are lower than the selected value from Select From

Answer 1

On every change of the first select you need to hide/show certain options of the second one.

$('.skillsFrom').change(function() {
    var theValue = $(this).val();
    if($(this).val()==="") {
        // show all values of .skillsTo if .skillsFrom select is set to ""
        $(this).parent().find('.skillsTo option').show();
    } else {
        theValue = parseInt(theValue, 10);
        $(this).parent().find('.skillsTo option').each(function() {
           if(parseInt($(this).val(), 10) <= theValue) {
               // hide if value <= selected value from .selectFrom
               $(this).hide();
           } else {
               // show if value > selected value from .selectFrom
               $(this).show();
           }
        });
    }
});