Me gustaría ocultar el campo de entrada según el valor desplegable. Por lo tanto, dos valores se completan automáticamente desde la base de datos stone1 y stone 2, por lo que si stone1 se convierte en pupa, quiero que se oculte el quilate y si es stone 2, entonces el quilate y si se completan más valores, ambos deben estar ocultos.

 <label for="form" class="control-label">=Service</label> <select id="form1" class="custom-select custom-select-sm select2" > <option selected="" disabled>Select services First</option> <?php ?> <!-- <option value="<?php echo $row['id'] ?>" ><?php echo $name ?></option> --> <?php endwhile; ?> <div class="col-md-2"> <div class="form-group ctd" data-cid="ctd"> <label for="ctd">stone1</label> <select class="form-control" id="ctd" name="ctd"> <option>24</option> <option>22</option> <option>20</option> <option>18</option> <option>16</option> <option>14</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group ctg" data-cid="ctg"> <label for="ctg">stone2</label> <select class="form-control" id="ctg" name="ctg"> <option>24</option> <option>22</option> <option>20</option> <option>18</option> <option>16</option> <option>14</option> </select> </div> </div>

Entonces, dos valores se completan automáticamente desde la base de datos piedra1 y piedra 2, por lo que si se completa piedra1, quiero que se oculte el quilate y si es piedra 2, entonces el quilate y si se completan más valores, ambos deben estar ocultos.

Probé este código pero oculta solo uno y no funciona en absoluto

 <script> var form1 = jQuery('#form1'); var select = this.value; form_id.change(function () { if ($(this).val() == 'stone1') { $('.ctd').show(); } else { $('.ctg').hide(); } }); </script>