Of Stack

JS implements the option method of moving Select up and down

  • 2021-01-18 06:17:03
  • OfStack

This article illustrates how JS implements option for Select to move up and down. To share with you for your reference, as follows: 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function UpOrDown(direct, selectId) {//direct : 1:Up, -1:Down
 var obj = document.getElementById(selectId);
 var len = obj.length;
 var index = obj.selectedIndex;
 // If: 1. No selected item ; 2. Up, but at the top ; 3. Down, but the bottom, no processing 
 if ( (index == -1) || (direct == -1 && index == 0) || (direct == 1 && index >= len - 1) )
  return;
 var swapIndex = index + direct;
 var tempOptions = new Array();
 for (var i = 0; i < len; i++){
  tempOptions[tempOptions.length] = obj.options[i == index?swapIndex:(i == swapIndex?index:i)];
 }
 obj.options.length = 0;
 for (var i = 0; i < len; i++)
  obj.options.add(tempOptions[i]);
}
function UpOrDown2(direct, selectId) {//direct : 1:Up, 0:Down
 var obj = document.getElementById(selectId);
 var len = obj.length;
 var index = obj.selectedIndex;
 // If: 1. No selected item ; 2. Up, but at the top ; 3. Down, but the bottom, no processing 
 if( (index == -1) || (direct == 1 && index == 0) || (direct == 0 && index >= len - 1) )
  return;
 var tempOptions = new Array();
 // So up, get yourself up 1 All to the last option The array; If you go down, get yourself to the end 1 One of the option An array of 
 for (var i = index - direct; i < len; i++)
  tempOptions[tempOptions.length] = obj.options[i];
 // I'm going to get rid of what I just got 
 obj.options.length = index - direct;
 // Take two of them upside down option
 obj.options.add(tempOptions[1]);
 obj.options.add(tempOptions[0]);
 // Will the rest of the option Add it all in 
 for (var i = 2; i < tempOptions.length; i++)
  obj.options.add(tempOptions[i]);
}
</script>
</head>
<body>
 <table>
  <tr>
   <td>
    <select id="Select1" size="100" style="width:100px;height:200px;">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
    </select>
   </td>
   <td>
    <img id="imgUp" alt="Up" onclick="UpOrDown(-1,'Select1')" style="cursor:pointer;" /><br />
    <img id="imgDown" alt="Down" onclick="UpOrDown(1,'Select1')" style="cursor:pointer;" />
   </td>
   <td>
    <img id="img1" alt="Up2" onclick="UpOrDown2(1,'Select1')" style="cursor:pointer;" /><br />
    <img id="img2" alt="Down2" onclick="UpOrDown2(0,'Select1')" style="cursor:pointer;" />
   </td>
  </tr>
 </table>
</body>
</html>

More about JavaScript related content interested readers can view the site features: "JavaScript search algorithm skills summary", "JavaScript animation effects and skills summary", "JavaScript error and debugging skills summary", "JavaScript data structure and algorithm skills summary", "JavaScript eraser algorithm and skills summary" and "JavaScript mathematical operation usage summary"

I hope this article is helpful to JavaScript program design.

Related articles: