MVC .NET - create dropdownlist for each item selected in a listbox

Question

I am currently trying to create/remove certain elements based on the selections in a listbox. My listbox is as follows:

    <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>

and my html elements (an input field and a dropdownlist) are as follows:

 <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>

And an image to illustrate:

how can I create a new input field and dropdownlist for each item selected in the listbox? All help is appreciated.

You need javascript to dynamically add new items to the DOM (refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options). Note also you current html for the input and dropdownlist will not work because the `name` attributes do not relate to your model and will not bind when you submit — , Aug 11 '16 at 01:26

Steve · Answer 1 · 2016-08-11T19:38:43.937

You won't be able to do it on the fly with .Net MVC. You'll have to include some 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>");
      }
    });

I put it in a JS fiddle here: https://jsfiddle.net/w0z144s1/9/

MVC .NET - create dropdownlist for each item selected in a listbox

1 Answers1