How to enable/disable 2nd dropdownlist value based on the selection of the previous dropdown value

Question

We have 2 dropdowns. On selection of the first dropdown the value related to it show be enabled or get highlighted and rest other options should be in disabled in the second dropdown. Both the dropdowns are multiselect and are array of objects.

I am able to append the conditional value in the second dropdown but rest other options are getting hide.I want all options to be visible and teh one selcted should be enabled/highlighted.

var firstVal = [

{ id: 1, value: 'foo1' },
{ id: 2, value: 'foo2' },
{ id: 3, value: 'foo3' },

] var secondVal = [

{ id: 1, value: 'foo11' },
{ id: 2, value: 'foo21' },
{ id: 2, value: 'foo22' },
{ id: 3, value: 'foo31' },
{ id: 3, value: 'foo32' },  

]

$('#rewardType').change(function (){
var firstSelcted = $(this).val();if (firstSelcted && firstSelcted.length > 0) {
        for (var j = 0; j < firstSelcted.length; j++) {                
            var filtered = secondVal.filter( function(myArr){
                 return myArr.id == firstSelcted[j];
        });for (var k = 0; k < filtered.length; k++) {
            $('#rewardTypes').append('<option value="' + filtered[k].value + '">' + filtered[k].value + '</option>');                   
            }
            $('this').css('background-color','red');
            $('#rewardTypes').selectpicker('refresh');
        }

If I select foo2 in first dropdown then in 2nd dropdown it should get highlighted or enabled foo21,foo22. And rest others should be disabled.

Answer 1

You can try below approach where you can populate list using json array and on change event of first list you can enable or disable the second list options

 $(document).ready(function(){ var firstVal = [ { id: 1, value: 'foo1' }, { id: 2, value: 'foo2' }, { id: 3, value: 'foo3' }, ] ; var secondVal = [ { id: 1, value: 'foo11' }, { id: 2, value: 'foo21' }, { id: 2, value: 'foo22' }, { id: 3, value: 'foo31' }, { id: 3, value: 'foo32' }, ] var $firstList = $('#rewardType'); var $secondList = $('#rewardTypes'); $.each(firstVal, function(key,val){ $firstList.append('<option value="' + val.id + '">' + val.value + '</option>'); }); $.each(secondVal, function(key,val){ $secondList.append('<option disabled value="' + val.id + '">' + val.value + '</option>'); }); $firstList.change(function(){ var value = $(this).val(); //console.log(value); $secondList.val(""); $secondList.find('option').each(function(){ var optVal = $(this).attr('value'); //console.log("option " + optVal); if(value.indexOf(optVal)>=0) { $(this).removeAttr('disabled'); } else { $(this).attr('disabled',true); } }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <select id="rewardType" multiple="true"><option value=""></option></select> <select id="rewardTypes" multiple="true"><option value=""></option></select> 

Answer 2

First code block is for HTML and second code block is JQuery try this:

<select id='firstval' onchange="witness();">
    <option selected></option>
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

<select id='secondval'>
    <option selected></option>
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

function witness(){
    $("#secondval option").each(function(){
        if($("#firstval option:selected").val() == $(this).val())
            $(this).attr("disabled", "disabled");
        else
            $(this).removeAttr("disabled");
    });
}