admin管理员组文章数量:1417551
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
....
});
});本文标签： javascripthow to get select box value in table tr jqueryStack Overflow
版权声明：本文标题：javascript - how to get select box value in table tr jquery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745267921a2650715.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论