JSFiddle - React, Tailwind, and code Playground
HTML
<select class="select first" data-type="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select second hide" data-type="2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select third hide" data-type="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/><br/><br/>
<p class="result"></p>
CSS
.hide {
display: none
}
JavaScript
$(document).ready(function(){
$('select.select').on('change', function(){
var self = $(this),
value = self.val(), // selected value
dataType = self.data('type'); // Select type (1st, 2nd and 3rd)
// Hide select third if change the first
if (dataType == 1 && !$('.second').hasClass('hide') && !$('.third').hasClass('hide'))
{
$('.third').addClass('hide');
// Show second select if hidden
} else if (dataType == 1 && $('.second').hasClass('hide')) {
$('.second').removeClass('hide');
// Show third select if hidden
} else if(dataType == 2 && $('.third').hasClass('hide')) {
$('.third').removeClass('hide');
}
// function to call to get the values from php
var valueText = getTheValueIntoPHPfile(value, dataType);
$('p.result').html(valueText);
})
// On page load automatic select the first option value of the first select
var f = $('select.first option:first-child');
f.val(f.val()).trigger('change');
});
function getTheValueIntoPHPfile(value, dataType)
{
return 'Value: ' + value +
'<br/>Select Type: ' + dataType;
// Put your jquery request to PHP here and return the values to the next select
}