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 welcome

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

4 Answers 4

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);                            
    });
}
2
  • Thank You Veer replying me but my this itemremove_btn not click first time using $(this).val(); Oct 28, 2016 at 7:14
  • in else part what you want to achieve ? in above code i m just binding function. means if selected value is not "other" then waht you want to do ?
    – Veer
    Oct 28, 2016 at 7:18
1

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.com/jquery-2.2.4.min.js"></script>

2
  • Thank You Bharat for replying me but my this code is not running $(".itemremove_btn").click(function(){ $(this).hide(); $(this).closest("tr").find("input:text").attr('disabled','disabled'); $(this).closest("tr").find("select").attr('disabled',false); }); Oct 28, 2016 at 7:09
  • @Nepster Why every button and inputs are display:none
    – Bharat
    Oct 28, 2016 at 7:20
1

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

4
  • Thank You Yurii replying me but my this itemremove_btn not click first time using $(this).val(); Oct 28, 2016 at 7:13
  • Do you want to fire button's click event when select's value != "other"? If yes, see this Oct 28, 2016 at 7:17
  • Thank You So much Yurii Your code is working fine . once again thanx Yurii Oct 28, 2016 at 7:24
  • Is everything ok or you still have any problems with this issue? You did not marked this or any other answer as accepted Oct 30, 2016 at 17:07
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.