How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor

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

bruce (sqlwork.com)

Reply

Yuki Tao

Contributor

2440 Points

1020 Posts

Re: How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor

Dec 10, 2018 02:48 AM|Yuki Tao|LINK

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

Please remember to "Mark as Answer" if suggestion helps.

Reply

SharadTripat...

Member

161 Points

59 Posts

Re: How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor

Dec 10, 2018 09:41 AM|SharadTripathi|LINK

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>

Reply

vovkor

None

0 Points

3 Posts

Re: How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor

Dec 21, 2018 06:05 PM|vovkor|LINK

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

Reply

bruce (sqlwo...

All-Star

50974 Points

12171 Posts

Re: How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor

Dec 21, 2018 07:25 PM|bruce (sqlwork.com)|LINK

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

bruce (sqlwork.com)

Reply

vovkor

None

0 Points

3 Posts

Re: How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor

Dec 23, 2018 03:58 PM|vovkor|LINK

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

Reply

Zhi Lv - MSF...

All-Star

45439 Points

7008 Posts

Microsoft

Re: How to copy selected values from one Html.ListBoxFor to other Html.ListBoxFor

Dec 28, 2018 06:21 AM|Zhi Lv - MSFT|LINK

Hi vovkor,

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

How to copy selected values from one Html.ListBoxFor to other Html.ListBoxForRSS

7 replies

Shortcuts

Related Links