從一個有兩個下拉列表的行，得到選定的值和哪個下拉列表更改

我正在嘗試更新表中的兩個級聯下拉有許多關於SO下拉的答案，但我無法找到與dynamically added rowsTable內cascading updates幫助。從一個有兩個下拉列表的行，得到選定的值和哪個下拉列表更改

鑑於許多行，他們都有不同的ID的filter #Id does'nt工作。那麼，如何識別哪行dropdown引發了變化 & 級聯更新另一個下拉/單元格在同一行的下一列中？

在表格行單元格內有2個DropDownList（選擇框）。爲了簡化這一點，第一個是Country - >第二個是state。因此，用戶需要選擇國家和州。

我的僞算法：

發現其中一個被解僱，且行（不確定如果需要的話，我應該在的地方線）
那麼火一個Ajax調用.. 。獲取基於國家/地區的值
用相同表格行中的值更新第二個下拉列表。
案例更改國家，然後更改狀態。
案例只是更改狀態，，但首先在同一行的第一個下拉列表中獲取國家/地區值。

我知道如何在常規頁面的變化和價值，但如何讓這些修改和更新相鄰的下拉列表。

$(document).on('change', 'select', function(){ 
     var data = $(this).val(); 
     alert(data); 
});

編輯，斯蒂芬請求顯示HTML

<tr> 
    <td> 
    //DropDown 1 (Imagine Country) 
    <span class="projectcodeid"> 
     <select class="form-control" id="Records_1__TCode_Project_ID" name="Records[1].TCode.Project.ID"><option value=""></option> 
     <option value="1">Plumbing</option> 
     <option value="2">Modeling</option> 
     </select></span>              
    </td> 

    <td> 
    //DropDown 2 (Imagine State) 
    <input type="hidden" name="Records.Index" value="1"> 
    <input class="timecodeid" name="Records[1].TCode.ID" type="hidden" value="5">              
    <span class="timecode timecodeDdlId"> <select class="form-control timecodeDdlId" id="Records_1__TCode_ID" name="Records[1].TCode.ID"><option value=""></option> 
</select></span> 
    </td> 

    <td> 
     <input name="Records[1].DataRecords[0].ID" type="hidden" value=""> 
     <input class="hours" name="Records[1].DataRecords[0].Work" type="text" value=""> 
    </td>             

    <td> 
     <input class="bs-checkbox" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false"> 
    </td> 
</tr>

樣圖澄清

來源

2017-03-12 transformer

您需要顯示一個典型的行的HTML（它只是使用類名和相對選擇器的問題） –

你必須給所有的元素和特殊的ID元素 –

@bharatsavani所有的元素和火災變化事件不同的ID我有不同的ID，我可以在代碼驗證。但是，如何將'change'附加到它，*因爲它們在運行時都有不同的id *基於db行？ – transformer

你需要給你的兩個元素<select>類名和使用相對選擇來選擇同一行中的相關元素。

假設你的HTML是

<table id="table"> // give this an id attribute 
    <tbody> 
     <tr> 
      <td><select class="country" ....> ..... </select></td> 
      <td><select class="state" ....> ..... </select></td> 
     </tr> 
    </tbody> 
</table>

然後你的腳本將

$('#table').on('change', '.country', function() { 
    var selectedValue = $(this).val(); 
    var row = $(this).closest('tr'); // get the row 
    var stateSelect = row.find('.state'); // get the other select in the same row 
    // make you ajax call passing the selectedValue to your controller 
    // in the success callback, update the options of stateSelect 
    $.ajax({ 
     url: ... 
     data { id: selectedValue }, 
     .... 
     success: function(data) { 
      stateSelect.empty(); 
      $.each(data, function(item, index) { 
       stateSelect.append($('<option></option>').val(iem.ID).text(item.Name)); 
      } 
     } 
    }); 
}

也better way to load 2 dropdown in mvc參考的代碼的細節來填充級聯dropdownlists（考慮緩存選項按第二個代碼示例以避免重複ajax調用）

來源

2017-03-12 09:12:04

當你說相對選擇器時，你指的是'$（this）.closest（'tr'）'我現在正在嘗試它...讓我工作 – transformer

是的，你選擇的元素類名相對於當前錶行。 –

因爲我使用'DropDownListFor'， - stateSelect.append將'state's加載到' @ Html.DropDownListFor（m => m.Records [i] .State.ID，Model.States，「」新{@class =「form-control state」}）' - 我想我需要更改第二個參數'Model.States'，對嗎？ – transformer

假設你不能通過類或任何確定dropdwns。假設每次更改下拉列表中的值時，您想要更新下的其他在同一行上。假設你有每行只有兩個下拉菜單：

$('table').on('change', 'select', function() { 
    var $current_dropdown = $(this), 
     $other_dropdown = $(this).closest('tr').find('select').not(this); 

    /// perform any task you need with current and other dropdown 

});

來源

2017-03-12 09:05:59 Professore

從一個有兩個下拉列表的行，得到選定的值和哪個下拉列表更改

回答

相關問題