如何從一個DropDownList基礎上的項目在ASP MVC另一個DropDownList的選擇和使用Javascript

我使用C＃和SQL Server 2005如何從一個DropDownList基礎上的項目在ASP MVC另一個DropDownList的選擇和使用Javascript

在視圖中制定的ASP.NET MVC 3應用程序中刪除的項目，我有兩個下拉列表，它從基表中加載相同的值。

我想創建一個從DropDownList的2

這刪除DropDwonList 1所選擇的項目相關的事件是代碼：

<%:Html.Label("Poste :")%><%: Html.DropDownListFor(model => model.SelectedPoste, Model.PostesItems, new { @id = "poste" })%> 

<%:Html.Label("Poste Suivant :")%><%: Html.DropDownListFor(model => model.PosteSuivantSelected, Model.NextPS, new { @id = "dd" })%>

所以立足於上面的代碼，當產品在'Poste'中選擇，它的類似符號應該從'Poste Suivant'中刪除。

這是我嘗試，但它不是工作：

function test3() { 
    var dd = document.getElementById('dd'); 
    var posteElement = document.getElementById('poste'); 
    var currentIndexP = posteElement.selectedIndex; 
    var currentIndexD = dd.selectedIndex; 
    if (currentIndexP == currentIndexD) dd.removeChild(dd[currentIndex]); 

}

我認爲這個問題是：因爲我沒有在下拉列表定義「TEST3（）」。

來源

2013-05-28 anouar

你可以只添加onchange屬性像你與id屬性在你的HTML輔助完成：

<%:Html.Label("Poste :")%><%: Html.DropDownListFor(model => model.SelectedPoste, Model.PostesItems, new { @id = "poste", onchange = "test3()" })%> 

<%:Html.Label("Poste Suivant :")%><%: Html.DropDownListFor(model => model.PosteSuivantSelected, Model.NextPS, new { @id = "dd" })%>

添加onload屬性身體標記，以便函數運行刪除默認選擇的項目：

<body onload="test3()">

然後如果我們修改JavaScript，以便它基於價值的，而不是指數將刪除第二個列表中的項目，並添加一些代碼來存儲丟失的選項，以在加回，一切都應該很好地工作：

var removedOption = null; 
var removedOptionIndex = -1; 

function test3() { 
    var dd = document.getElementById('dd'); 
    var posteElement = document.getElementById('poste'); 
    var currentValue = posteElement.options[posteElement.selectedIndex].value; // this will be the value of the selected option, '2' in this case: <option value="2">Two</option> 
    var currentText = posteElement.options[posteElement.selectedIndex].text; // this will be the text of the selected option, 'Two' in this case: <option value="2">Two</option> 

    // add the previously removed option back into the list in its previous position 
    if (removedOption != null) { 
     var newOpt = document.createElement("option"); 
     newOpt.value = removedOption.value; 
     newOpt.innerHTML = removedOption.text; 
     if (removedOptionIndex < 0) removedOptionIndex = 0; 
     if (removedOptionIndex > dd.options.length) removedOptionIndex = dd.options.length; 
     insertOptionToSelect(dd, removedOptionIndex, newOpt); 
     removedOption = null; 
    } 

    for (var i = 0; i < dd.options.length; i++) // loop through all of dd's options 
    { 
     if (dd.options[i].value == currentValue) // use this if you want to compare by value 
     { 
      removedOption = dd.options[i]; 
      removedOptionIndex = i; 
      dd.removeChild(dd.options[i]); 
      break; 
     } 
     if (dd.options[i].text == currentText) // use this if you want to compare by text 
     { 
      removedOption = dd.options[i]; 
      removedOptionIndex = i; 
      dd.removeChild(dd.options[i]); 
      break; 
     } 
    } 
} 

function insertOptionToSelect(select, idx, option) { 
    var saved = []; 
    var i; 
    for (i = 0; i < select.options.length; i++) { 
     saved.push(select.options[i]); 
    } 
    select.options.length = 0; 
    for (i = 0; i < idx; i++) { 
     select.options[select.options.length] = saved[i]; 
    } 
    select.options[select.options.length] = option; 
    while (i < saved.length) { 
     select.options[select.options.length] = saved[i++]; 
    } 
}

感謝他的回答pizzamonster這個問題How to insert option at specified index of select(Multiple) in html?和他insertOptionToSelect功能。

要按值或文本進行比較，只需使用相應的if語句，並隨意刪除其他變量以獲得整潔。我給了你們兩個選擇，因爲我是MVC自己的新手，而且我不是100％肯定有關呈現的HTML =]

來源

2013-05-28 15:38:35 Sean

Thx ,,,我試過但該項沒有刪除:(（ – anouar

我已經編輯我的答案，嘗試一下，雖然有一點很突出，如果你的用戶去選擇'poste'中的每個項目，'dd'中就沒有選項了，也許這隻應該運行一次？你需要添加一些東西來重新添加缺少的字段，當所選項目在'poste'中被更改時？ – Sean

Thx再次爲您的工作而感到遺憾，我嘗試了您的代碼，但沒有得到任何結果：（（該項目仍然存在！關於你的評論，是的，它應該只刪除一次,,,這意味着當我選擇P1例如poste ,,,它應該從dd ,,暫時刪除，然後我選擇P2在poste ,,, dd必須包含P1但不是P2 ,,,我希望你瞭解我:)我等待你的評論，Thx :)） – anouar

如何從一個DropDownList基礎上的項目在ASP MVC另一個DropDownList的選擇和使用Javascript

回答

相關問題