I would like to hide input field based on dropdown value. So two values are auto populated from database stone1 and stone 2 so if stone1 is pupated I want karat to be hidden and if stone 2 then carat and if any more values populated both should be hidden
<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>
So two values are auto-populated from database stone1 and stone 2 so if stone1 is populated I want karat to be hidden and if stone 2 then carat and if any more values populated both should be hidden
I tried this code but it hides only one and does not work at all
<script>
var form1 = jQuery('#form1');
var select = this.value;
form_id.change(function () {
if ($(this).val() == 'stone1') {
$('.ctd').show();
} else {
$('.ctg').hide();
}
});
</script>
(function ($) {
$(function () {
var form1 = jQuery('#form1');
var select = this.value;
$('#form1').change(function(){
if( $(this).val()==="1" ){
$("#ctd").show()
$("#ctg").hide()
$('label[for="ctg"]').hide();
$('label[for="ctd"]').show();
} else {
$("#ctg").show()
$("#ctd").hide()
$('label[for="ctd"]').hide();
$('label[for="ctg"]').show();
}
});
$('#form1').trigger("change");
});
}(jQuery));