[英]how to get select box value in table tr jquery
如何在更改事件中获取tr td选择框值。
使用此jquery代码仅获取第一个选择框值。
然后单击第二个选择框,获得相同的类,第一个选择框的值
请给我这个问题的任何解决方案
任何帮助随时欢迎
这是我的jQuery代码
$('.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.com/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>
在函数中使用$(this)
对象引用选择框
您可以尝试以下代码
$('.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);
});
}
您可以以这种简单的方式尝试
$('.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.com/jquery-2.2.4.min.js"></script>
采用
var getval = $(this).val();
代替
var getval = $(".sel_item_specify option:selected").val();
更新资料
如果您要在所选值不是“ other”的情况下触发按钮的click事件,则您的代码应如下所示:
$(".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();
}
});
您的问题还不够清楚,但是您是否打算捕获集合中单个项目的价值。 或者,在具有多个具有相同属性的元素的情况下,您可以像这样简单地进行处理。
//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 .... }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.