如何獲取表tr jquery中的選擇框值

Question

如何在更改事件中獲取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&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> 

Answer 1

在函數中使用$(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 2

您可以以這種簡單的方式嘗試

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

采用

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

代替

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

JSFiddle

更新資料

如果您要在所選值不是“ 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();
    }
});

JSFiddle

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