Popular Dropdownlist from another

Question

Good morning,

I have a Dropdownlist populated from a Model class. Example: Processor, Memory, HD

After clicking "+" I have to add another Dropdownlist with all values less the value selected in the previous Combo.

   @if (Model.ListAtributoAtivo != null)
                {
                    @Html.DropDownListFor(model => model.idAtributo, Model.AtributosFiltroList, @Resource.Selecionar)
                    <a onclick="return add(this)"><img src="../../images/icon-3.png" alt="icon"></a>
                }

I’ve tried using knout.js but it’s not easy to implement it.

Answer 1

Hello, in the code below there are two drop’s where the second is populated with all the options of the first except the option selected, I hope it helps.

function popularOptions2() {
  $("#options1 option").each(function() {
    if (!$(this).is(':selected')) {
      $("#options2").append("<option>" + $(this).val() + "</option>")
    }
  });
}

$("#populate").click(function() {
  popularOptions2();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='options1'>
  <option>Teste 1</option>
  <option>Teste 2</option>
  <option>Teste 3</option>
</select>
<select id='options2'>
</select>
<button id='populate'>
  Populate
</button>

Answer 2

Using the method clone() you copy an element with all its properties, making it easy to manipulate it, in the example : https://jsfiddle.net/qk07Lg03/, i clone a dropdown and Seto the first option of him as selected, it is possible to do this with any element, such as duplicate an entire form, for example.

<select id='sl1'>
<option></option>
<option>1</option>
<option>2</option>
</select>
<button>
+
</button>


$("button").click(function(){
    var novoSl = $("#sl1").clone(true).insertBefore($(this));
  //Agora é possivel manipular o novo select como desejar;
  novoSl.find("option")[0].prop("selected", true);
})