JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div id="sssss">
	<select name="select" class="select">
		<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
	</select>
</div>

<select name="arrrrrr" id="arrrrrr" disabled="disabled">
	<option value=""> - </option>
</select>

JavaScript

function changeSelectList(select_id, select_value, select_name)
{
	var sselect = $('select[name="arrrrrr"]');
    
	var json = [ 
    	{ "color": "#f00_"+select_id, "type": "aaa_"+select_id, "order": "1_"+select_id },
    	{ "color": "#0f0_"+select_id, "type": "bbb_"+select_id, "order": "2_"+select_id },
    	{ "color": "#00f_"+select_id, "type": "ccc_"+select_id, "order": "3_"+select_id }
	];
	sselect.empty();
	$.each(json, function() {
	    console.log(this);
        //sselect.append('<option value="'+this.type+'">'+this.color+'</option>');
    	sselect.append('<option value="'+this[select_value]+'">'+this[select_name]+'</option>');
	});
	sselect.removeAttr('disabled');
}

$(document).ready(function () {
	$("#sssss").on('change', '.select', function() {

		var ssId = $(this).val();
		var select_value = 'type';
		var select_title = 'color';

		changeSelectList(ssId, select_value, select_title);
	});
});