Remove From My Forums

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

Question
0

Sign in to vote

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

0

Sign in to vote

User-463241013 posted

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

Friday, December 21, 2018 6:05 PM
0

Sign in to vote

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
0

Sign in to vote

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
0

Sign in to vote

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

Asked by:

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

Question

All replies