简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

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

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

WBOY
WBOYOriginal
2016-05-16 15:05:251258Durchsuche

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>

Betriebseffekt:

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

Stellungnahme：
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
Vorheriger Artikel：jQuery implementiert eine Methode zum Ändern des Hintergrunds einer Webseite, indem es „cookies_jquery“ schreibtNächster Artikel：jQuery implementiert eine Methode zum Ändern des Hintergrunds einer Webseite, indem es „cookies_jquery“ schreibt

In Verbindung stehende Artikel

Mehr sehen