How to get tr td select box value in change event.
using this jquery code getting only first select box value.
and click on second select box getting same class first select box value
Please give me any solution for this problem
Any help Always wele
This is my jquery code
$('.sel_item_specify').change(function(){
var getval = $(".sel_item_specify option:selected" ).val();
alert('selectbox value '+getval);
if(getval == 'other'){
$(this).closest("tr").find("button").show();
$(this).closest("tr").find("input:text").show();
$(this).closest("tr").find("input:text").attr('disabled',false);
$(this).attr('disabled','disabled');
}
else{
$(".itemremove_btn").click(function(){
$(this).hide();
$(this).closest("tr").find("input:text").attr('disabled','disabled');
$(this).closest("tr").find("select").attr('disabled',false);
});
}
});<script src=".0.0/jquery.min.js"></script>
<table id="settable" class="table table-border">
<tr>
<td class="col-md-3"><p><strong>Brand</strong></p></td>
<td class="col-md-3">
<select class="sel_item_specify form-control" rel="Brand" name="Brand">
<option class="add_textbox" value="Unbranded">Unbranded</option>
<option class="add_textbox" value="aden" +="" anais="">aden + anais</option>
<option class="add_textbox" value="Angelcare">Angelcare</option>
<option class="add_textbox" value="Babe" ease="">Babe Ease</option>
<option class="add_textbox" value="Babies"R"Us">Babies"R"Us</option>
<option class="add_textbox" value="Baby" banz="">Baby Banz</option>
<option value="other">Enter your own</option></select>
</select>
</td>
<td class="col-md-3"><input style="display:none;" name="Brand" class="form-control col-lg-11 col-sm-11 col-md-11" type="text"></td>
<td> <button type="button" class="itemremove_btn btn btn-default" style="display:none;">Remove</button></td>
</tr>
<tr>
<td class="col-md-3"><p><strong>MPN</strong></p></td>
<td class="col-md-3">
<select class="sel_item_specify form-control" rel="MPN" name="MPN">
<option class="add_textbox" value="Does" not="" apply="">Does Not Apply</option>
<option value="other">Enter your own</option></select>
</td>
<td class="col-md-3"><input style="display:none;" name="MPN" class="form-control col-lg-11 col-sm-11 col-md-11" type="text"></td>
<td> <button type="button" class="itemremove_btn btn btn-default" style="display:none;">Remove</button></td>
</tr>
</table>How to get tr td select box value in change event.
using this jquery code getting only first select box value.
and click on second select box getting same class first select box value
Please give me any solution for this problem
Any help Always wele
This is my jquery code
$('.sel_item_specify').change(function(){
var getval = $(".sel_item_specify option:selected" ).val();
alert('selectbox value '+getval);
if(getval == 'other'){
$(this).closest("tr").find("button").show();
$(this).closest("tr").find("input:text").show();
$(this).closest("tr").find("input:text").attr('disabled',false);
$(this).attr('disabled','disabled');
}
else{
$(".itemremove_btn").click(function(){
$(this).hide();
$(this).closest("tr").find("input:text").attr('disabled','disabled');
$(this).closest("tr").find("select").attr('disabled',false);
});
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="settable" class="table table-border">
<tr>
<td class="col-md-3"><p><strong>Brand</strong></p></td>
<td class="col-md-3">
<select class="sel_item_specify form-control" rel="Brand" name="Brand">
<option class="add_textbox" value="Unbranded">Unbranded</option>
<option class="add_textbox" value="aden" +="" anais="">aden + anais</option>
<option class="add_textbox" value="Angelcare">Angelcare</option>
<option class="add_textbox" value="Babe" ease="">Babe Ease</option>
<option class="add_textbox" value="Babies"R"Us">Babies"R"Us</option>
<option class="add_textbox" value="Baby" banz="">Baby Banz</option>
<option value="other">Enter your own</option></select>
</select>
</td>
<td class="col-md-3"><input style="display:none;" name="Brand" class="form-control col-lg-11 col-sm-11 col-md-11" type="text"></td>
<td> <button type="button" class="itemremove_btn btn btn-default" style="display:none;">Remove</button></td>
</tr>
<tr>
<td class="col-md-3"><p><strong>MPN</strong></p></td>
<td class="col-md-3">
<select class="sel_item_specify form-control" rel="MPN" name="MPN">
<option class="add_textbox" value="Does" not="" apply="">Does Not Apply</option>
<option value="other">Enter your own</option></select>
</td>
<td class="col-md-3"><input style="display:none;" name="MPN" class="form-control col-lg-11 col-sm-11 col-md-11" type="text"></td>
<td> <button type="button" class="itemremove_btn btn btn-default" style="display:none;">Remove</button></td>
</tr>
</table>4 Answers
Reset to default 2in function use $(this) object to refer select box
you van try with below code
$('.sel_item_specify').change(function(){
var getval = $(this).val();
alert('selectbox value '+getval);
if(getval == 'other'){
$(this).closest("tr").find("button").show();
$(this).closest("tr").find("input:text").show();
$(this).closest("tr").find("input:text").attr('disabled',false);
$(this).attr('disabled','disabled');
}
else{
$(".itemremove_btn").click(function(){
$(this).hide();
$(this).closest("tr").find("input:text").attr('disabled','disabled');
$(this).closest("tr").find("select").attr('disabled',false);
});
}
You can try in this simple way
$('.sel_item_specify').change(function(){
alert($(this).val());
});<table id="settable" class="table table-border">
<tr>
<td class="col-md-3"><p><strong>Brand</strong></p></td>
<td class="col-md-3">
<select class="sel_item_specify form-control" rel="Brand" name="Brand">
<option class="add_textbox" value="Unbranded">Unbranded</option>
<option class="add_textbox" value="aden" +="" anais="">aden + anais</option>
<option class="add_textbox" value="Angelcare">Angelcare</option>
<option class="add_textbox" value="Babe" ease="">Babe Ease</option>
<option class="add_textbox" value="Babies"R"Us">Babies"R"Us</option>
<option class="add_textbox" value="Baby" banz="">Baby Banz</option>
</select>
</td>
<td class="col-md-3"><input style="display:none;" name="Brand" class="form-control col-lg-11 col-sm-11 col-md-11" type="text"></td>
<td> <button type="button" class="itemremove_btn btn btn-default" style="display:none;">Remove</button></td>
</tr>
<tr>
<td class="col-md-3"><p><strong>MPN</strong></p></td>
<td class="col-md-3">
<select class="sel_item_specify form-control" rel="MPN" name="MPN">
<option class="add_textbox" value="Does" not="" apply="">Does Not Apply</option>
<option value="other">Enter your own</option></select>
</td>
<td class="col-md-3"><input style="display:none;" name="MPN" class="form-control col-lg-11 col-sm-11 col-md-11" type="text"></td>
<td> <button type="button" class="itemremove_btn btn btn-default" style="display:none;">Remove</button></td>
</tr>
</table>
<script src="https://code.jquery./jquery-2.2.4.min.js"></script>Use
var getval = $(this).val();
instead of
var getval = $(".sel_item_specify option:selected").val();
JSFiddle
Update
If you want to trigger button's click event if selected value is not "other" then your code should be like this:
$(".itemremove_btn").click(function() {
$(this).hide();
$(this).closest("tr").find("input:text").attr('disabled', 'disabled');
$(this).closest("tr").find("select").attr('disabled', false);
});
$('.sel_item_specify').change(function() {
//var getval = $(".sel_item_specify option:selected").val();
var getval = $(this).val();
alert('selectbox value ' + getval);
if (getval == 'other') {
$(this).closest("tr").find("button").show();
$(this).closest("tr").find("input:text").show();
$(this).closest("tr").find("input:text").attr('disabled', false);
$(this).attr('disabled', 'disabled');
} else {
$(".itemremove_btn").click();
}
});
JSFiddle
Your question is not clear enough but if you intend to capture the value of individual items in a collection. Or in a scenario where you have multiple elements of same attributes you can simply go about it like this.
//Any item/element with this class falls into this group
$('.td_group').each(function () {
$(this).on("change", function () {
//some custom attribute to uniquely identify each td or some element in the group
var optionID = $(this).attr('option_id');
....
//You can do as you desire, operating on individual items in the group
....
});
});