locked
How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor RRS feed

  • Question

  • User-463241013 posted

    Hello everyone!

    Help please: How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor ? using JavaScript.

    Sunday, December 9, 2018 9:52 AM

All replies

  • User-474980206 posted

    simple:

      <select id="lstLeft" name="lst1" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <button type="button" id="btnMoveRight">></button>
      <button type="button" id="btnMoveLeft"><</button>
      <select id="lstRight" name="lst1" multiple>
      </select>
    
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
    $(function() {
      $('#btnMoveLeft').click(function(){
          $('#lstRight option:selected').appendTo('#lstLeft')
      });
      $('#btnMoveRight').click(function(){
          $('#lstLeft option:selected').appendTo('#lstRight')
      });
    });
    </script>

    note: remember only selected options are posted back on a form post, so if using a form post rather than ajax, you will need to select all options on submit. 

    Sunday, December 9, 2018 7:08 PM
  • User1520731567 posted

    Hi vovkor,

    According to your requirement,I think you could use the jQuery multiselect Plugin,

    • Free (under WTFPL license)
    • Works in an unobtrusive fashion
    • Fully open sourced
    • Keyboard support
    • Provides some callbacks
    • Fully customizable via CSS
    • Depends on jQuery 1.8+
    • Tiny code ~8kb minified

    you could refer its demo and download its libraries in this link,

    For example:

    <html>
    <head>
    
        <link href="Content/multi-select.css" rel="stylesheet" />
    </head>
    <body>
        <select multiple="multiple" id="my-select" name="my-select[]">
            <option value='elem_1'>elem 1</option>
            <option value='elem_2'>elem 2</option>
            <option value='elem_3'>elem 3</option>
            <option value='elem_4'>elem 4</option>
        </select>
    
    </body>
    </html>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/jquery.multi-select.js"></script>
    
    <script>
        $('#my-select').multiSelect()
    </script> 

    Best Regards.

    Yuki Tao

    Monday, December 10, 2018 2:48 AM
  • User1356206773 posted

    Hi Vovkor,

    If you want to select the same values in first and second list box without removing options from first list box, below sample code may help you.

    <html>
    <body>
    <select id="select1" multiple onchange='selectSecond()'>
    <option value="1" selected>Red</option>
    <option value="2">Green</option>
    <option value="3" selected>Blue</option>
    <option value="4">Orange</option>
    </select>
    
    <select id="select2" multiple>
    <option value="1">Red</option>
    <option value="2">Green</option>
    <option value="3">Blue</option>
    <option value="4">Orange</option>
    </select>
    
    <script  type="text/javascript">
    function selectSecond(){
      var selectedValuesInFirst = Array.from(document.getElementById("select1").options).filter(option => option.selected).map(option => option.value);  
      var options = Array.from(document.getElementById("select2").options) ;
      for(var i=0;i<options.length;i++)
      {
       if(selectedValuesInFirst.indexOf(options[i].value) >=0)
       {
           options[i].selected =true;
       }
       else{
         options[i].selected =false;
       }
     }
     }
     selectSecond();
    </script>
    </body>
    </html>

    Monday, December 10, 2018 9:41 AM
  • User-463241013 posted

    Hello bruce. I think it doesn't work for helper @Html.ListBoxFor

    Friday, December 21, 2018 6:05 PM
  • User-474980206 posted

    ListBoxFor just generates a <select multiple>. just be sure you got the id's correct.

    Friday, December 21, 2018 7:25 PM
  • User-463241013 posted

    @Html.ListBoxFor generates <ul><li>...</li></ul> and <select> not only <select>

    I can select options in sel2 which are selected in sel1

    $("#sel1 option:selected").each(function () {
          $('#sel2').find('option[value="' + this.value + '"]').prop("selected", true); 
    });

    I see it in console

    $("#sel2 option:selected").each(function () {
       console.log(' Selected ');
       console.log(this.text + ' -> ' + this.value);
    });

    but it is not enough. Rows are not selected in dropDownList.

    Sunday, December 23, 2018 3:58 PM
  • User-271186128 posted

    Hi vovkor,

    @Html.ListBoxFor generates <ul><li>...</li></ul> and <select> not only <select>

    Have you solved this problem?

    As far as I know, the @Html.ListBoxFor will generate a <select> html elements, the output as below:

    You could use F12 developer tools to check the html elements. 

    Have you ever override the Html.ListBoxFor method, or whether you are using some JQuery plugins?

    If the ListBox items was changed to ul and li, you could use F12 developer tools to check whether the items contain some attribute (which is used to check whether this item is selected or not), might be you could get the selected item via this attribute.

    If still have any further question, can you share the related code, so that we could test it on our side. it might be easier for us to help you solve the problem.

    Best regards,
    Dillion

    Friday, December 28, 2018 6:21 AM