如何获得选择框值在表tr jquery

how to get select box value in table tr jquery

本文关键字:tr jquery 何获得 选择      更新时间:2023-09-26

如何在更改事件中获取trtd select box值

使用这个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&quot;R&quot;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)对象引用select box

你可以试试下面的代码

$('.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&quot;R&quot;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();

JSFiddle

如果你想触发按钮的点击事件,如果选择的值不是"other",那么你的代码应该像这样:

$(".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

您的问题不够清楚,但是如果您打算捕获集合中单个项目的值。或者在有相同属性的多个元素的场景中,您可以简单地这样做:

    
    //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
          ....
        });
    });