We Keep Coding

Remove closest dynamic element within the same row using jquery

I have multiple row which are dynamically generated i want to, there is a dropdown list i want to hide input fields next to dropdown of only row whose selection value is 2, i have tried below exampe but it is not working.
$(document.body).on('change', '.check_valid', function() {
if ($(this).children("option:selected").val() == 2) {
$(this).closest(".form-control.text_min").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row clearfix">
<div class="form-group">
<h5 class="card-inside-title">Classn</h5>
<select name="input" class="form-control show-tick check_valid" aria-invalid="false">
<option value="">Select</option>
<option value="1">Intermediate</option>
<option value="2">High School</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Min</h5>
<div class="form-line focused">
<input type="text" name="min[][]" placeholder="Min" class="form-control text_min">
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Classn</h5>
<select name="input" class="form-control show-tick check_valid" aria-invalid="false">
<option value="">Select</option>
<option value="1">Intermediate</option>
<option value="2">High School</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Min</h5>
<div class="form-line focused">
<input type="text" name="min[][]" placeholder="Min" class="form-control text_min">
</div>
</div>
</div>

You need to navigate much further
$(document).on('change', '.check_valid', function() {
$(this).closest(".row").next().find(".text_min").toggle(this.value!=="2");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row clearfix">
<div class="form-group">
<h5 class="card-inside-title">Classn</h5>
<select name="input" class="form-control show-tick check_valid" aria-invalid="false">
<option value="">Select</option>
<option value="1">Intermediate</option>
<option value="2">High School</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Min</h5>
<div class="form-line focused">
<input type="text" name="min[][]" placeholder="Min" class="form-control text_min">
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Classn</h5>
<select name="input" class="form-control show-tick check_valid" aria-invalid="false">
<option value="">Select</option>
<option value="1">Intermediate</option>
<option value="2">High School</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Min</h5>
<div class="form-line focused">
<input type="text" name="min[][]" placeholder="Min" class="form-control text_min">
</div>
</div>
</div>

jQuery class doesn't add on changing the option of a select box

I have attributes (color, size) and their units(black,blue || 32cm,42cm).
I want when selecting the color from the select box it should open the first unit's select box (black, blue) and when to click on size then it should open the 2nd select box (32cm,42cm). I've done almost everything but not been able to get the expected result.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).children().attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

You need to target only the selected option and its corresponding data-attr.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).find('option:selected').attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

Bootstrap- Align two <select> horizontally

These two select from the same control-group are getting displayed vertically. I want to display them horizontally. I tried doing inline-block on CSS, but there are some other <div> with the same control-group class, with different width and margin settings. Changing the class name doesn't help either.
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
<select name="Delivery" id="Delivery" disabled="">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select>
<script>
var category = document.getElementById('Delivery');
document.getElementById('week').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'OPEN') {
category.value = 'OPEN';
} else {
category.value = 'CLOSE';
}
} else {
category.value = '';
}
}
</script>
</div>

Flexbox version:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div style="display: flex; flex-direction: row;">
<select></select>
<select></select>
</div>
</div>
Bootstrap version:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div class="row>
<div class="col-md-6>
<select></select>
</div>
<div class="col-md-6>
<select></select>
</div>
</div>
</div>
CSS version:
<div class="control-group">
<label for="week" style="display: block; width: 100%;">Dispatch schedule:</label>
<select style="display: float: width: 49%;></select>
<select style="display: float: width: 49%;></select>
</div>

you could use multi column grid
and set no of columns or width accordingly.
fiddle - https://jsfiddle.net/nLddvkw6/1
**
<div class="control-group">
<div class="row">
<div class="border col-xs-4"><label for="week">Dispatch schedule:</label></div>
<div class="border col-xs-4"><select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
</div>
<div class="border col-xs-4"> <select class="form-control" name="Delivery" id="Delivery" disabled="" style="width:110px;">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select></div>
</div>
</div>

jQuery getting data attribute and setting correct selected option

I am new to jQuery and think I'm close to what I'm needing.
I need to get the value from the data-status and then set the correct select option and selected.
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
// u = updated
// n = new
if (optionStatus == 'u') {
foundStatus = $currentStatus.find('select option');
if ($(foundStatus).val() == 'u') {
$(this).attr('selected', 'selected');
} else if ($(foundStatus).val() == 'n') {
$(this).attr('selected', 'selected');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_4_Status" name="PC_Row_4_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>

You should simply use .val() method to set the value of element.
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
$currentStatus.find('select').val(optionStatus);
});
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
$currentStatus.find('select').val(optionStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_4_Status" name="PC_Row_4_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>

$(this).closest(("select[name*='FIELD2']") not working

I have this form:
<div id="div_id_form-0-FIELD1" class="form-group">
<label for="id_form-0-FIELD1" class="control-label col-sm-2">
Amount Type
</label>
<div class="controls col-sm-3">
<select class="select form-control" id="id_form-0-FIELD1" name="form-0-FIELD1">
<option value="">---------</option>
<option value="d" selected="selected">Dollars</option>
<option value="p">Percent of</option>
</select>
</div>
</div>
<div id="div_id_form-0-FIELD2" class="form-group">
<label for="id_form-0-FIELD2" class="control-label col-sm-2">
Deduct from total
</label>
<div class="controls col-sm-3">
<select class="select form-control" id="id_form-0-FIELD2" name="form-0-FIELD2">
<option value="" selected="selected">---------</option>
<option value="g">Gross Pay</option>
<option value="n">Net Pay</option>
<option value="h">Hourly Rate</option>
</select>
</div>
</div>
I haveFIELD1 in ($this), I want to get FIELD2. This is not getting it for me:
$(this).closest(("select[name*='FIELD2']")

Use the .next() method, like so:
$(this)
.closest("div.form-group")
.next("div.form-group")
.find("select[name*='FIELD2']");