Heim > Web-Frontend > js-Tutorial > Hauptteil

jQuery realisiert die Bewegung des Dropdown-Felds nach links und rechts (alle verschieben, die ausgewählten verschieben)_jquery

WBOY
Freigeben: 2016-05-16 15:05:25
Original
1310 Leute haben es durchsucht

Die verwendete Methode ist: appendTo()
Format: $(content).appendTo(selector)
Die appendTo()-Methode fügt den angegebenen Inhalt am Ende (immer noch innerhalb) des ausgewählten Elements ein.
Die Methode click() löst ein Klickereignis aus oder gibt eine Funktion an, die ausgeführt werden soll, wenn ein Klickereignis auftritt.

Sehen Sie sich den spezifischen Implementierungscode an:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#add").click(function () {
      //1,方式一
//        var $option = $("#select1 option:selected");  //获取选中的选项
//        var $remove = $option.remove(); //删除下拉列表中选中的选项
//        $remove.appendTo("#select2");  //追加给对方
        //2,方式二
        var $option = $("#select1 option:selected");  //获取选中的选项
        $option.appendTo("#select2");  //追加给对方
      });
      $("#add_all").click(function () {
        var $option = $("#select1 option");
        $option.appendTo("#select2");
      });
      $("#remove").click(function () {
        var $option = $("#select2 option:selected");
        $option.appendTo("#select1");
      });
      $("#remove_all").click(function () {
        var $option = $("#select2 option");
        $option.appendTo("#select1");
      });
    });
  </script>
</head>
<body>
<h3>下拉框应用</h3>
  <table>
    <tr>
      <td>
        <select id="select1" multiple="multiple" style="width:100px;">
          <option value="News">News</option>
          <option value="Sport">Sport</option>
          <option value="Education">Education</option>
          <option value="Technology">Technology</option>
          <option value="Art">Art</option>
        </select>
      </td>
      <td>
        <button id="add">
          >|</button><br />
        <button id="add_all">
          >></button><br />
        <button id="remove_all">
          <<</button><br />
        <button id="remove">
          |<</button>
      </td>
      <td>
        <select id="select2" multiple="multiple" style="width:100px;">
        </select>
      </td>
    </tr>
  </table>
</body>
</html>
Nach dem Login kopieren

Betriebseffekt:

jQuery realisiert die Bewegung des Dropdown-Felds nach links und rechts (alle verschieben, die ausgewählten verschieben)_jquery

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