Question

我正在使用级联下拉列表，我知道如何填充页面中第一个下拉列表更改的第二个下拉列表。

这是一个示例代码，用于处理页面中jquery的级联下拉列表。

$(document).ready(function () {   
        //Dropdownlist Selectedchange event     
        $("#SelectedStateID").change(function () {   
            $("#SelectedCountryID").empty();   
            $.ajax({   
                type: 'POST',   
               url: '@Url.Action("GetCountrys")', // we are calling json method     
                dataType: 'json',   
                data: { id: $("#SelectedStateID").val() },   
                success: function (states) {   
                    // states contains the JSON formatted list     
                    // of Countrys passed from the controller     

                   $("#SelectedCountryID").append('<option value="' + "0" + '">' + "Select Country" + '</option>');   
                    debugger;   
                    $.each(states, function (i, state) {   
                        $("#SelectedCountryID").append('<option value="' + state.Value + '">' + state.Text + '</option>');   
                       // here we are adding option for Countrys     
                    });   
                },   
                error: function (ex) {   
                    alert('Failed to retrieve Country.' + ex);   
                }   
            });   
            return false;   
       })   
    });

但我的问题是假设当每行的两列html表中有两个下拉列表然后当用户选择一个下拉列表时，如何在同一行的另一列中找到第二个下拉列表来填充它。如果可能，请帮我提供代码示例。感谢

Answer 1

如果第一个是select总是改变另一个列的第一个选择，而第二个总是改变另一个列的第二个，你可以循环遍历表行，如下所示：

 $("tr.SelectRow").each(function(index) {
    var thisRow = $(this);
    thisRow.find('select.SelectedState').change(function () { 
        var countrySelect = thisRow.find('select.SelectedCountry');  
        countrySelect.empty();

Answer 2

试试这个，

 $('table select').change(function(){        //'select' can be customize by giving class selector to all table element
      $(this).closest('tr').find('select').each(function(){
         //$(this)   //select box of same row
         console.log($(this).find(":selected").text());
      });
});

Answer 3

***** //您的html表格*****

  <tr>
    <td>
      <select class="firstSelectBox">
         <option value="1" selected>1</option>
         <option value="2">2</option>
      </select>
   </td>
   <td>
      <select class="secondSelectBox">
      </select>
   </td>
  </tr>
  <tr>
    <td>
       <select class="firstSelectBox">
         <option value="3" selected>3</option>
         <option value="4">4</option>
      </select>
   </td>
   <td>
      <select class="secondSelectBox">
         <option></option>
      </select>
   </td>
  </tr>

***** //示例用于ajax响应的名为getOption.php的php页面*****

<?php 
    echo "<option id='1'>1</option><option id='2'>2</option>";
?>

//您的jquery代码

$(document).ready(function(){
    $("select.firstSelectBox").each(function(event){
        $(this).on("change",function(event){
            var id = $(this).val();
            var toBePopulated = $(this).parent("td").parent("tr").children("td").children("select.secondSelectBox");
            toBePopulated.empty();
            $.ajax({
                url: 'getOption.php',
                method: 'POST',
                data: {id:id},
            })
            .done(function(data) {
                toBePopulated.append(data);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
        })
    })

JQuery：如果在该行中更改另一个下拉列值，如何在同一个表行中查找下拉列表

3 个答案: