MVC .NET - 爲列表框中選擇的每個項目創建下拉列表

我目前正在嘗試基於列表框中的選擇創建/刪除某些元素。我的列表框如下：MVC .NET - 爲列表框中選擇的每個項目創建下拉列表

<div class="form-group" id="subIngredients"> 
      @Html.LabelFor(model => model.Recipe.SubIngredientIds, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 

      @Html.ListBoxFor(model => model.Recipe.SubIngredientIds, new MultiSelectList(ViewBag.PossibleIngredients, "Value", "Text", ViewBag.SelectedIngredients), new { @class = "form-control multiselect", style = "height:200px" }) 
      @Html.ValidationMessageFor(model => model.Recipe.SubIngredientIds, "", new { @class = "text-danger" }) 
      </div> 
     </div>

和我的HTML元素（輸入字段和下拉列表）如下：

<div class="editor-label"> 
       <label class="control-label" for="[email protected](i).Key">@Model.IngredientIdNamePairs.ElementAt(i).Value</label> 
      </div> 
      <div class="editor-field"> 
       <div style="display:inline-block"> 
       <input class="form-control text-box single-line subq" data-val="true" data-val-number="The field @Model.IngredientIdNamePairs.ElementAt(i).Value must be a number." data-val-range="Please enter a valid decimal" data-val-range-max="1.79769313486232E+308" data-val-range-min="0" data-val-required="The @Model.IngredientIdNamePairs.ElementAt(i).Value field is required." id="[email protected]ntAt(i).Key" name="RegularSize.SubIngredientRuns[@Model.IngredientIdNamePairs.ElementAt(i).Key]" type="text" value="@(Model.RegularIngredientIdValuePairs != null && Model.RegularIngredientIdValuePairs.ContainsKey(Model.IngredientIdNamePairs.ElementAt(i).Key) ? Model.RegularIngredientIdValuePairs[Model.IngredientIdNamePairs.ElementAt(i).Key] : 0)" /> 
       </div> 
       <div style="display:inline-block"> 
       @Html.DropDownListFor(m => m.SelectedRecipeUnit, Model.BaseUnitOptions, "Select Unit", new { @class = "form-control dropdownlistReg", @data_key = @Model.IngredientIdNamePairs.ElementAt(i).Key }) 
       </div> 
       <span class="field-validation-valid text-danger" data-valmsg-for="[email protected](i).Key" data-valmsg-replace="true"></span> 
      </div>

和圖像來說明：

怎麼能我爲列表框中選擇的每個項目創建一個新的輸入字段和下拉列表？所有的幫助表示讚賞。

來源

2016-08-10 GregH

需要Javascript新項目動態添加到DOM（參見[這個答案]（http://stackoverflow.com/questions/28019793/對於某些選項，提交同一部分視圖稱爲多次數據到控制器/ 28081308＃28081308）。另外請注意，當前輸入和下拉列表的html不起作用，因爲'name'屬性與您的模型無關，並且在您提交時不會綁定 –

您將無法使用.Net MVC進行實時操作。你將不得不包含一些JavaScript。

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
<body>  
<select id="bigList" name="sometext" size="5" multiple> 
    <option>text1</option> 
    <option>text2</option> 
    <option>text3</option> 


    <option>text4</option> 
     <option>text5</option> 
    </select> 

    <select id="ddl"> 
    </select>  
    </body> 

    $("#bigList").click(function() 
    { 
     var results = $(this).find(':selected'); 
     $("#ddl").empty(); 
     for(var cnt=0; cnt < results.length; cnt++) 
     { 
      $("#controlz").append(results[cnt].text + "<input type=textbox></input> </br>"); 
    // $("#ddl").append("<option>" +results[cnt].text + "</option>"); 
     } 
    });

我把它放在一個JS提琴在這裏：https://jsfiddle.net/w0z144s1/9/

來源

2016-08-10 20:56:17 Steve

MVC .NET - 爲列表框中選擇的每個項目創建下拉列表

回答

相關問題