Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

166
Views
Move multi-select list with JavaScript

I'm programming for the first time. I want to write a code that moves multiple selections from a list with the up and down buttons in JavaScript. However, I was able to write something that moves up and down, but it does not work well if I move multiple times. Please tell me how to move multiple selected items up and down.

If you select 3 and 5 and press the up button, you want to do as follows.

<option value = "1"> 1 </ option>
<option value = "2"> 2 </ option>
<option value = "3"> 3 </ option>
<option value = "4"> 4 </ option>
<option value = "5"> 5 </ option>
<option value = "6"> 6 </ option>
↓
<option value = "1"> 1 </ option>
<option value = "3"> 3 </ option>
<option value = "2"> 2 </ option>
<option value = "5"> 5 </ option>
<option value = "4"> 4 </ option>
<option value = "6"> 6 </ option>
<table>
   <tr>
       <td>
           <select id="item-list" size="8" multiple="multiple">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
           </select>
       </td>
       <td>
           <input type="button" value="↑" onclick="move('up');">
           <br/>
           <input type="button" value="↓" onclick="move('down');">
       </td>
   </tr>
</table>
function move(act)
{
    var s = document.getElementById("item-list");
    if (s.selectedIndex == -1) return;

    var opt = s.options[s.selectedIndex];


            if (act == 'up')
            {
                if (s.options[s.selectedIndex - 1])
                {
                    s.insertBefore(opt, s.options[s.selectedIndex - 1]);
                }
            }
            if (act == 'down')
            {
                if (s.options[s.selectedIndex + 1])
                {
                    s.insertBefore(opt, s.options[s.selectedIndex + 1].nextSibling);
                }
            }
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Your code had several small bugs. i fixed.

function move(act) {  
    var s = document.getElementById("item-list");
  
    if(s.selectedIndex == -1) return;
    
    var opt = s.options[s.selectedIndex];

    var opts = s.options;
  
    for (let i = 0; i < opts.length; i++) {
        if (opts[i].selected){
            console.log(opts[i].value);

        if (act == 'up') {
          if (s.options[s.selectedIndex-1]) {
              s.insertBefore(opt, s.options[s.selectedIndex-1]);
          }
        }
          
        if (act == 'down') {
          if (s.options[s.selectedIndex+1]) {
            s.insertBefore(opt, s.options[s.selectedIndex+1].nextSibling);
          }
        }
      }   
    }
}
<table>
   <tr>
       <td>
           <select id="item-list" size="8" multiple="multiple">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
           </select>
       </td>
       <td>
           <input type="button" value="↑" onclick="move('up');">
           <br/>
           <input type="button" value="↓" onclick="move('down');">
       </td>
   </tr>
</table>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!