JSFiddle - React, Tailwind, and code Playground

by nyluje

HTML

<div class="">
				<label for="flipswitch" class="required">Flipswitch that allow multiple selection on select</label>
        <select id="flipswitch" name="" data-role="flipswitch" class="ui-flipswitch-input" tabindex="-1">
          <option value="0">OFF</option>
          <option value="1">ON</option>
         </select>
</div>
<div class="col-12 flex-container-in-line" id="standard_offer_form_offerLinkedToStores_div_row_id">


<div class="">
				<label for="select" class="required">Select</label>
			
				<!--div class="ui-select">
        <a href="#select-listbox" role="button" id="select-button" aria-haspopup="true" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow" data-rel="popup">
        <span></span>
        </a-->
        <select id="select" name="" data-native-menu="false" tabindex="-1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        </select>
        <div style="display: none;" id="select-listbox-placeholder"></div>
        </div>	
	
</div>

JavaScript

var ControlJsTools = function(){};

ControlJsTools.prototype.flipswitchChangesSingleSelToMultipleSel=function(fsContainerId,selectContainerId){
	console.log(' fsContainerId is '+ fsContainerId + ' / selectContainerId is '+ selectContainerId);

function setSelectAccordingToFs(fsContainerId,selectContainerId){
		fsSelect = $('body').find('select[id='+fsContainerId+']');
		targetSelect = $('body').find('select[id='+selectContainerId+']');

		targetSelect.selectmenu();
		targetSelect.find('option:selected').removeAttr('selected');

	 	if(fsSelect.val()==0){
	 		console.log('fsSelect.val()==0');
			targetSelect.attr('multiple',false);
	 	} else {
	 		console.log('fsSelect.val()!=0');
			targetSelect.attr('multiple',true);
	 	}

		targetSelect.selectmenu('destroy');		
		targetSelect.selectmenu();
		targetSelect.selectmenu('enable');		
		targetSelect.selectmenu('refresh',true);

	}


	setSelectAccordingToFs(fsContainerId,selectContainerId);

 	
	fsSelect.on('change',{'target_select':selectContainerId,'fs':fsContainerId},function(event){

       setSelectAccordingToFs(event.data['fs'],event.data['target_select']);


	});
};

$(document).ready(function(){
		$('#flipswitch').flipswitch();
    	$('#select').selectmenu();      
		new ControlJsTools().flipswitchChangesSingleSelToMultipleSel('flipswitch','select'); 
});