Как получить значение поля выбора в таблице tr jquery

Question

Как получить значение tr td select box в событии изменения.

используя этот код jquery, получая только первое значение поля выбора.

и нажмите на втором поле выбора становится тот же класс сначала выберите поле Значение

Пожалуйста, дайте мне какое-либо решение этой проблемы

Любая помощь всегда приветствуют

Это мой JQuery код

$('.sel_item_specify').change(function(){ \t \t \t \t 
 
    \t var getval = $(".sel_item_specify option:selected").val(); 
 
    \t alert('selectbox value '+getval); 
 
    \t if(getval == 'other'){ \t \t 
 
    \t \t $(this).closest("tr").find("button").show(); 
 
    \t \t $(this).closest("tr").find("input:text").show(); \t \t \t \t \t \t 
 
    \t \t $(this).closest("tr").find("input:text").attr('disabled',false); 
 
    \t \t $(this).attr('disabled','disabled'); \t \t \t \t \t 
 
    \t } 
 
    \t else{ 
 
    \t \t $(".itemremove_btn").click(function(){ \t \t \t \t \t \t \t 
 
    \t \t $(this).hide(); 
 
    \t \t $(this).closest("tr").find("input:text").attr('disabled','disabled'); 
 
    \t \t $(this).closest("tr").find("select").attr('disabled',false); \t \t \t \t \t \t \t 
 
    \t \t }); 
 
    \t } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table id="settable" class="table table-border"> 
 
    <tr> 
 
    \t <td class="col-md-3"><p><strong>Brand</strong></p></td> 
 
    \t <td class="col-md-3"> 
 
    \t <select class="sel_item_specify form-control" rel="Brand" name="Brand"> 
 
    \t <option class="add_textbox" value="Unbranded">Unbranded</option> 
 
    \t <option class="add_textbox" value="aden" +="" anais="">aden + anais</option> 
 
    \t <option class="add_textbox" value="Angelcare">Angelcare</option> 
 
    \t <option class="add_textbox" value="Babe" ease="">Babe Ease</option> 
 
    \t <option class="add_textbox" value="Babies&quot;R&quot;Us">Babies"R"Us</option> 
 
    \t <option class="add_textbox" value="Baby" banz="">Baby Banz</option> 
 
     <option value="other">Enter your own</option></select> 
 
    \t </select> 
 
    \t </td> 
 
    \t <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> 
 
    \t <td> <button type="button" class="itemremove_btn btn btn-default" style="display:none;">Remove</button></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    \t <td class="col-md-3"><p><strong>MPN</strong></p></td> 
 
    \t <td class="col-md-3"> 
 
    \t <select class="sel_item_specify form-control" rel="MPN" name="MPN"> 
 
    \t <option class="add_textbox" value="Does" not="" apply="">Does Not Apply</option> 
 
    \t <option value="other">Enter your own</option></select> 
 
    \t </td> 
 
    \t <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> 
 
    \t <td> <button type="button" class="itemremove_btn btn btn-default" style="display:none;">Remove</button></td> 
 
    </tr> 
 
    
 
    </table>

Answer 1

Вы можете попробовать таким простым способом

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

Answer 2

Использование

var getval = $(this).val(); 

вместо

var getval = $(".sel_item_specify option:selected").val(); 

JSFiddle

Update

Если вы хотите, чтобы вызвать щелчок событие кнопки, если выбранное значение не «другой», то ваш код должен быть таким:

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

Answer 3

в использовании функции $(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);        
    }); 
} 

Answer 4

Ваш вопрос недостаточно ясен, но если вы намерены фиксировать ценность отдельных элементов в коллекции. Или в сценарии, где у вас есть несколько элементов с одинаковыми атрибутами, вы можете просто сделать это так.

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