title: How to populate a select box with the selected values of another select box
body: <p>I have a multiselect <code>select</code> box whose values are something like Object_1, Object_2... Object_10.
  When I click a button after selecting values, I can write selected values below, but I want to populate another select box with those selected values.</p>
  
  <p>Here is my code for the select box:</p>
  
  <pre><code>  &lt;body style="background-color: azure;" ng-app="app"&gt;
      &lt;div id="container" style="padding: 50px 100px 50px 200px; width: 80%" ng-controller="ctrl"&gt;
          &lt;div class="block" style="padding: 15px;"&gt;
              &lt;h4 class="blockTitle"&gt;Rule Builder&lt;/h4&gt;
              &lt;br /&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;button class="btn btn-default" id="objct"&gt;Show Objects&lt;/button&gt;
                      &lt;script&gt;
                          $(document).ready(function(){
                              $('#objct').click(function(){
                                  $('#objList').show();
                              })                            
                          })
                      &lt;/script&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-5" id="objList" style="display: none;height: auto; width: 200px;" &gt;
                      &lt;select class="SlectBox" size="8" multiple="multiple" title="Select objects"&gt;
                          &lt;option value="Object_1"&gt;Object 1&lt;/option&gt;
                          &lt;option value="Object_2"&gt;Object 2&lt;/option&gt;
                          &lt;option value="Object_3"&gt;Object 3&lt;/option&gt;
                          &lt;option value="Object_4"&gt;Object 4&lt;/option&gt;
                          &lt;option value="Object_5"&gt;Object 5&lt;/option&gt;
                          &lt;option value="Object_6"&gt;Object 6&lt;/option&gt;
                          &lt;option value="Object_7"&gt;Object 7&lt;/option&gt;
                          &lt;option value="Object_8"&gt;Object 8&lt;/option&gt;
                          &lt;option value="Object_9"&gt;Object 9&lt;/option&gt;
                          &lt;option value="Object_10"&gt;Object 10&lt;/option&gt;
                          &lt;option value="Object_11"&gt;Object 11&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
                      &lt;button id="close" class="btn btn-default" style="float: right"&gt;OK&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;&lt;br /&gt;
              &lt;p id="list"&gt;&lt;/p&gt;
              &lt;script type="text/javascript"&gt;
                  $(function () {
                      $('#SlectBox').multiselect({
                          includeSelectAllOption: true
                      });
                      $('#close').click(function(){
                          var objs = [];
                          $.each($(".SlectBox option:selected"), function(){            
                              objs.push($(this).val());
                          });
                          $( '#list' ).html(objs.join(", "));
                      });
                  });
              &lt;/script&gt;
              &lt;br /&gt;&lt;hr /&gt;&lt;br /&gt;
              &lt;select id="selctObjs" multiple="multiple" size="1"&gt;
                  //Here I want to populate the list
              &lt;/select&gt;
              &lt;br /&gt;&lt;br /&gt;
              &lt;br /&gt;&lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What I select in the select box with the <code>class="SlectBox"</code> should be populate in the select box with <code>id="selctObjs"</code>.</p>
  
  <p>Can anyone help me please?</p>