Question

我目前正在尝试根据列表框中的选择创建/删除某些元素。我的列表框如下：

    <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="Subitem_@Model.IngredientIdNamePairs.ElementAt(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="RegularSize_SubIngredientRuns_@Model.IngredientIdNamePairs.ElementAt(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="Subitem_@Model.IngredientIdNamePairs.ElementAt(i).Key" data-valmsg-replace="true"></span>
            </div>

图片说明：

如何为列表框中选择的每个项目创建新的输入字段和下拉列表？感谢所有帮助。

Answer 1

您将无法使用.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/

MVC .NET - 为列表框中选择的每个项创建下拉列表

1 个答案: