JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <select id="select1">
    <option value=""></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select id="select2">
    <option value=""></option>
    <option value="A1">A1</option>
    <option value="A2">A2</option>
        <option value="B1">B1</option>
    <option value="B2">B2</option>
        <option value="C1">C1</option>
    <option value="C2">C2</option>
  </select>
  <select id="select3">
    <option value=""></option>
    <option value="A11">A1-1</option>
    <option value="A21">A2-1</option>
    <option value="B11">B1-1</option>
    <option value="B21">B2-1</option>
    <option value="C11">C1-1</option>
    <option value="C21">C2-1</option>
  </select>
</div>
<div>
  money: <span>0元</span>
</div>
</div>

JavaScript

$(document).ready(function() {

$('#select2').prop("disabled",true);
$('#select3').prop("disabled",true);

  $('#select1').on('change', function() {
    var a = $(this).val();
    
    if(a!="")
    {$('#select2').prop("disabled",false);}
    else
    {$('#select2').prop("disabled",true);}
    
    switch(a) {
      case 'A':
				$("#select2 :not(:contains('A'))").hide();
        $("#select2 :contains('A')").show();
        $('span').text('100元');
        break;
      case 'B':
       $("#select2 :not(:contains('B'))").hide();
       $("#select2 :contains('B')").show();
        $('span').text('200元');
        break;
      case 'C':
       $("#select2 :not(:contains('C'))").hide();
       $("#select2 :contains('C')").show();
        $('span').text('300元');
        break;
      defalut:
        $('span').text('0元');
        break;
    }
  });
});
$('#select2').on('change', function() {
    var a = $(this).val();
    
    if(a!="")
    {$('#select3').prop("disabled",false);}
    else
    {$('#select3').prop("disabled",true);}
    
     switch(a) {
      case 'A1':
				$("#select3 option[value!='A11']").hide();
        $("#select3 option[value='A11']").show();
        break;
      case 'A2':
				$("#select3 option[value!='A21']").hide();
        $("#select3 option[value='A21']").show();
        break;
      case 'B1':
       $("#select3 option[value!='B11']").hide();
       $("#select3 option[value='B11']").show();
        break;
      case 'B2':
       $("#select3 option[value!='B21']").hide();
       $("#select3 option[value='B21']").show();
        break;
      case 'C1':
       $("#select3 option[value!='C11']").hide();
       $("#select3 option[value='C11']").show();
        break;
      case 'C2':
       $("#select3 option[value!='C21']").hide();
       $("#select3 option[value='C21']").show();
        break;
        }
    });