JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<select id="select1">
<option value=""></option>
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a3">a3</option>
</select>
<select id="select2">
<option value=""></option>
<option value="b1">b1</option>
<option value="b2">b2</option>
</select>
<select id="select3">
<option value=""></option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>
</div>
<div>
money: <span>0元</span>
</div>
</div>
JavaScript
$(document).ready(function() {
$('#select1').on('change', function() {
var a = $(this).val();
switch(a) {
case 'a1':
$('#select2').children().each(function() {
if ($(this).val() === 'b1') {
$(this).show();
} else {
$(this).hide();
}
});
$('#select3').children().each(function() {
if ($(this).val() === 'c1' || $(this).val() === 'c3') {
$(this).show();
} else {
$(this).hide();
}
});
$('span').text('100元');
break;
case 'a2':
$('#select2').children().each(function() {
if ($(this).val() === 'b1' || $(this).val() === 'b2') {
$(this).show();
} else {
$(this).hide();
}
});
$('#select3').children().show();
$('span').text('200元');
break;
case 'a3':
$('#select2').children().show();
$('#select3').children().each(function() {
if ($(this).val() === 'c2') {
$(this).show();
} else {
$(this).hide();
}
});
$('span').text('300元');
break;
defalut:
$('#select2').children().show();
$('#select3').children().show();
$('span').text('0元');
break;
}
});
});