Heim > Web-Frontend > js-Tutorial > Beispiel für das dynamische Hinzufügen und Löschen von linken und rechten Dropdown-Feldern mithilfe von JavaScript

Beispiel für das dynamische Hinzufügen und Löschen von linken und rechten Dropdown-Feldern mithilfe von JavaScript

不言
Freigeben: 2018-03-30 11:15:41
Original
1289 Leute haben es durchsucht

In diesem Artikel wird ein Beispiel für das dynamische Hinzufügen und Löschen von linken und rechten Dropdown-Feldern mit JavaScript vorgestellt. Es ist sehr praktisch.

Wirkung:

Beispiel für das dynamische Hinzufügen und Löschen von linken und rechten Dropdown-Feldern mithilfe von JavaScript

1. HTML-Code

<body>
<tablealign="center">
  <tr>
    <td><selectsize="15"id="left">
      <option>左1</option>
      <option>左2</option>
      <option>左3</option>
      <option>左4</option>
      <option>左5</option>
      <option>左6</option>
      <option>左7</option>
      <option>左8</option>
      <option>左9</option>
      <option>左10</option>
    </select></td>
 
    <td>
      <inputtype="button"value="MoveRight"onclick="moveRight()"><br>
      <inputtype="button"value="MoveAllRight"onclick="moveAllright()"/><br>
      <inputtype="button"value="MoveLeft"onclick="moveLeft()"><br>
      <inputtype="button"value="MoveAllLeft"onclick="moveAllLeft()"><br>
    </td>
 
 
    <td>
      <selectsize="15"id="right">
        <option>右1</option>
        <option>右2</option>
        <option>右3</option>
        <option>右4</option>
        <option>右5</option>
        <option>右6</option>
        <option>右7</option>
      </select>
    </td>
 
    <td></td>
  </tr>
 
  </table>
 
</body>
Nach dem Login kopieren

2. Der JavaScript-Skriptcode lautet wie folgt:

Der Code lautet wie folgt
 代码如下

 functionmoveRight()

 {

   //获取左边select元素节点

   varleftSelectNode = document.getElementById("left");

   //获取子元素节点数组

   //如果选定的索引号为-1,则提示用户

   if(leftSelectNode.selectedIndex == -1)

   {

     alert("请选定需要移动的选项");

     return;

   }

   //获取待移动的选项

   varwaitSelection = leftSelectNode.options[leftSelectNode.selectedIndex];

   //获取右边的selec元素节点并加入

   varrightSelectNode = document.getElementById("right");

   //右边新增一个节点

   rightSelectNode.appendChild(waitSelection);

 

 }

 

 functionmoveAllright()

 {//获取select对象

   varleftSelectNode = document.getElementById("left");

   varrightSelectNode = document.getElementById("right");

 

   varoptionsNodes = leftSelectNode.options;

 

   varlength = optionsNodes.length;

   for(vari = 0; i

   {

     rightSelectNode.appendChild(optionsNodes[0]);

   }

 }

 

 functionmoveLeft()

 {

   //获取左边的select对象

  varrightSelectNode = document.getElementById("right");

  //没有选中则提示

   if(rightSelectNode.selectedIndex == -1)

   {

     alert("请选择一个选项");

     return;

   }

   //获取待移动的选项

   varwaitMoveNode = rightSelectNode.options[rightSelectNode.selectedIndex];

   //获取左边的select对象

   varleftSelectNode = document.getElementById("left");

 

   //左边的select对象加入节点

   leftSelectNode.appendChild(waitMoveNode);

 

 }

 functionmoveAllLeft()

 {

   //获取右边的select对象

   varrightSelectNode = document.getElementById("right");

   varleftSelectNode = document.getElementById("left");

 

   varlength = rightSelectNode.options.length;

 

   //遍历其option选项并加入到左边的select中

   for(vari = 0; i

   {

     leftSelectNode.appendChild(rightSelectNode.options[0]);

   }

 }

 

3. Der einfache CSS-Code lautet wie folgt:

Der Code lautet wie folgt
 代码如下

  select, td

  {

    font:20px/40px'宋体';

  }

  option {width:100px;

    font:20px/40px'宋体';

  }

  input {

    padding:3px;

    font:20px/40px'宋体';

    text-align:center;

    width:130px;

    height:40px;

    background-color: orange;

  }

select, td {

Schriftart:20px/40px '宋体'; }

Option {width:100px; Schriftart:20px/ 40px '宋体';

}

Eingabe { padding:3px; Schriftart:20px/40px '宋体'; text-align:center; width:130px; height:40px;background-color: orange; }
Verwandte Empfehlungen: Beispiel für die Überprüfung des E-Mail-Adressformats in JavaScript-FreigabeDetaillierte Erklärung von new() in JavascriptJavascript-Code zur Implementierung des Datei-Drag-Events

Das obige ist der detaillierte Inhalt vonBeispiel für das dynamische Hinzufügen und Löschen von linken und rechten Dropdown-Feldern mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage