I need assistance with hiding an input field based on the chosen value from a dropdown. There are two values, stone1 and stone2, that are automatically populated from a database. My goal is to hide the "karat" input field if stone1 is selected, hide the "carat" input field if stone2 is selected, and hide both fields if any other value is selected.
<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>
The auto-populated values are stone1 and stone2 from the database. If stone1 is selected, I want the karat input field to be hidden. If stone2 is selected, I want the carat input field to be hidden. Additionally, if any other value is selected, both input fields should be hidden.
I attempted the code provided below, but it only hides one of the input fields and does not work properly:
<script>
var form1 = jQuery('#form1');
var select = this.value;
form_id.change(function () {
if ($(this).val() == 'stone1') {
$('.ctd').show();
} else {
$('.ctg').hide();
}
});
</script>