JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<select id="select1" multiple>

    <option value="-1">Select</option>

    <option value="1">a</option>

    <option value="2">b</option>

    <option value="3">c</option>

    <option value="4">d</option>

</select>



<select id="select2" multiple>

    <option value="-1">Select</option>

    <option value="5">a</option>

    <option value="6">b</option>

    <option value="7">c</option>

    <option value="8">d</option>

</select>

<select id="select3" multiple>

    <option value="-1">Select</option>

    <option value="5">a</option>

    <option value="3">b</option>

    <option value="10">c</option>

    <option value="11">d</option>

</select>

<select id="select4" multiple>

    <option value="-1">Select</option>

    <option value="5">a</option>

    <option value="10">b</option>

    <option value="13">c</option>

    <option value="1">d</option>

</select>

JavaScript

var request, whereClause, requestURL = "";
	// populateSelectors();
	function populateSelectors() {
		requestURL = "";
		constructWhere();
		request.done(function( response ) {
			var response = [{"select1" : [1, 2, 3, 4, 5]}];
			console.log(response);
			$("select").each(function(index) {
				var selector = $(this);
				var selectorId = selector.prop("id");
				var options = response[index][selectorId]; //= [1, 2, 3, 4, 5]; //if object of objects --  response[id]
				console.log(options);
				$.each( options, function(i, val) {

                  selector.append('<option value="'+i+'">'+val+'</option>');               		

              });
			});
			
			drawWhatever();			
		});
	}	
	

$("select").each(function() {

    $(this).change(function() {
    	requestURL = "";

        
         var CurrentSelect = $(this);
         var PrevAll = $(this).prevAll();
         var NextAll = $(this).nextAll();


           if ( CurrentSelect.val() == "-1" ) {
           	CurrentSelect.children(":first").nextAll().prop("selected", false);
           	}  	 
           
            constructWhere();

           request.done(function( response ) {
          
           	var response = [{"select1" : [2, 1, 3, 5]}, {"select2" : [2, 1, 3, 5]}];

              if (CurrentSelect.val() != null && CurrentSelect.val() != "-1") {
           

            PrevAll.each( function() {
            	 var resp = response[0].select1;
            	  var Sibling = $(this);
            	  	Sibling.children().prop("selected", false);
            		var ParVals = [];

                $.each( resp, function(i, val) {
                	//alert("{"+i+":"+val+"}");
                	if (resp.indexOf(val) != -1) {

                 			ParVals.push(val);
               		}

                   });
                    Sibling.val(ParVals);

                });
             }

            NextAll.each( function() {
            	 var resp = response[1].select2;
            	 var Sibling = $(this);
           ...