2. Algorithm
  3. javascript - how to get select box value in table tr jquery - Stack Overflow

javascript - how to get select box value in table tr jquery - Stack Overflow

admin2025-04-22  0

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&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>

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&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>

  • javascript
  • jquery
Share Improve this question edited Oct 28, 2016 at 7:37 prasanth 22.5k4 gold badges33 silver badges56 bronze badges asked Oct 28, 2016 at 7:00 Tanveer KhanTanveer Khan 772 silver badges10 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 2

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745267922a293399.html

javascripthow to get select box value in table tr jqueryStack Overflow

最新回复(0)