Popular DropDownList from another

1

Good morning,

I have a DropDownList populated from a Model class. example: Processor, Memory, HD

Afterclicking"+" I have to add another DropDownList with all values less than 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 have tried using knout.js but it is not easy to implement it.

    
asked by anonymous 08.03.2017 / 15:27

2 answers

3

Hello, in the code below there are two drop's where the second is populated with all the options of the first minus the selected option, 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>
    
08.03.2017 / 16:39
0

Using the clone() method you copy an element with all its properties, making it easy to manipulate it, in the example: link , I clone a dropdown and I set the first option of it to selected , you can do this with any element, such as duplicating 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);
})
    
09.03.2017 / 14:23