JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!--Bootstrap* CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script>
/* DEMO DATA */
functionTitles = [];
functionTitles[1] = [{'id': 1, 'name': 'Barmaid'},{'id': 2, 'name': 'Cook'}];
functionTitles[2] = [{'id': 1, 'name': 'Director'},{'id': 2, 'name': 'IT Programmer'}];
//console.log(functionTitles);
// pre-load function titles
$(document).ready(function(){
var funcTypeID = 1;
var funcPreSelTitleID = 2;
loadFunctionTitles( funcTypeID, funcPreSelTitleID );
});
/**
* loadFunctionTitles()
* Loads function titles based on type id (Artistic, Technical, etc.)
* @param int typeid load function titles for given type id
* @param int preSelId pre-select list value
*/
function loadFunctionTitles(typeid, preSelId) {
//console.log(typeid, preSelId);
$('#function_title_id').empty();
if( typeof functionTitles[typeid] != 'undefined' ) {
$( '#function_title_id' ).prop( "disabled", false );
functionTitles[typeid].forEach(function(funcTitle) {
$('#function_title_id').append('<option value="' + funcTitle.id + '"' + (funcTitle.id == preSelId ? ' selected' : '') + '>' + funcTitle.name + '</option>');
});
}
// disable function titles dropdown if we don't have any
else {
$( '#function_title_id' ).prop( "disabled", true );
}
// force refresh of bootstrap-select!
$('#function_title_id').selectpicker('refresh');
}
</script>
</head>
<body>
<form>
<div class="form-check...