masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

Javascript melaksanakan kemahiran drop-down pilihan gesaan box_javascript

WBOY
Lepaskan： 2016-05-16 15:22:53
asal
1407 orang telah melayarinya

Artikel ini memperkenalkan contoh penggunaan pilih dan cadang dalam gabungan, menyokong pemilihan langsung dalam menu lungsur dan menapis input dalam kandungan lungsur.
Kesan keseluruhan adalah seperti berikut:

1. Mula-mula, anda perlu mengimport fail berikut 

<link href="select2.min.css" rel="stylesheet" /> 
<script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="select2.min.js"></script>
Salin selepas log masuk

Perlu diperhatikan di sini bahawa jquery harus diletakkan di hadapan select2.
2. Beberapa contoh

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link href="select2.min.css" rel="stylesheet" /> 
  <style type="text/css"> 
  .select2-dropdown { 
    margin-left: 8px !important; 
    margin-top: 20px !important; 
  } 
  </style> 
</head> 
 
<body> 
  <h1>这是单选例子</h1> 
  <div class="s1-example"> 
    <select class="js-example-basic-single" style="width:200px"> 
      <optgroup label="Alaskan/Hawaiian Time Zone"> 
        <option value="AK">Alaska</option> 
        <option value="HI">Hawaii</option> 
        <option value="">请选择</option> 
      </optgroup> 
      <optgroup label="Pacific Time Zone"> 
        <option value="CA">California1111111111111111111111111111111111111111111111111</option> 
        <option value="NV">Nevada</option> 
        <option value="OR">Oregon</option> 
        <option value="WA">Washington</option> 
      </optgroup> 
      <optgroup label="Mountain Time Zone"> 
        <option value="AZ">Arizona</option> 
        <option value="CO">Colorado</option> 
        <option value="ID">Idaho</option> 
        <option value="MT">Montana</option> 
        <option value="NE">Nebraska</option> 
        <option value="NM">New Mexico</option> 
        <option value="ND">North Dakota</option> 
        <option value="UT">Utah</option> 
        <option value="WY">Wyoming</option> 
      </optgroup> 
      <optgroup label="Central Time Zone"> 
        <option value="AL">Alabama</option> 
        <option value="AR">Arkansas</option> 
        <option value="IL">Illinois</option> 
        <option value="IA">Iowa</option> 
        <option value="KS">Kansas</option> 
        <option value="KY">Kentucky</option> 
        <option value="LA">Louisiana</option> 
        <option value="MN">Minnesota</option> 
        <option value="MS">Mississippi</option> 
        <option value="MO">Missouri</option> 
        <option value="OK">Oklahoma</option> 
        <option value="SD">South Dakota</option> 
        <option value="TX">Texas</option> 
        <option value="TN">Tennessee</option> 
        <option value="WI">Wisconsin</option> 
      </optgroup> 
      <optgroup label="Eastern Time Zone"> 
        <option value="CT">Connecticut</option> 
        <option value="DE">Delaware</option> 
        <option value="FL">Florida</option> 
        <option value="GA">Georgia</option> 
        <option value="IN">Indiana</option> 
        <option value="ME">Maine</option> 
        <option value="MD">Maryland</option> 
        <option value="MA">Massachusetts</option> 
        <option value="MI">Michigan</option> 
        <option value="NH">New Hampshire</option> 
        <option value="NJ">New Jersey</option> 
        <option value="NY">New York</option> 
        <option value="NC">North Carolina</option> 
        <option value="OH">Ohio</option> 
        <option value="PA">Pennsylvania</option> 
        <option value="RI">Rhode Island</option> 
        <option value="SC">South Carolina</option> 
        <option value="VT">Vermont</option> 
        <option value="VA">Virginia</option> 
        <option value="WV">West Virginia</option> 
      </optgroup> 
    </select> 
  </div> 
  <h1>这是多选例子</h1> 
  <div class="s2-example"> 
    <select class="js-example-basic-multiple" multiple="multiple"> 
      <optgroup label="Alaskan/Hawaiian Time Zone"> 
        <option value="AK">Alaska</option> 
        <option value="HI">Hawaii</option> 
        <option value="">请选择</option> 
      </optgroup> 
      <optgroup label="Pacific Time Zone"> 
        <option value="CA">California1111111111111111111111111111111111111111111111111</option> 
        <option value="NV">Nevada</option> 
        <option value="OR">Oregon</option> 
        <option value="WA">Washington</option> 
      </optgroup> 
      <optgroup label="Mountain Time Zone"> 
        <option value="AZ">Arizona</option> 
        <option value="CO">Colorado</option> 
        <option value="ID">Idaho</option> 
        <option value="MT">Montana</option> 
        <option value="NE">Nebraska</option> 
        <option value="NM">New Mexico</option> 
        <option value="ND">North Dakota</option> 
        <option value="UT">Utah</option> 
        <option value="WY">Wyoming</option> 
      </optgroup> 
      <optgroup label="Central Time Zone"> 
        <option value="AL">Alabama</option> 
        <option value="AR">Arkansas</option> 
        <option value="IL">Illinois</option> 
        <option value="IA">Iowa</option> 
        <option value="KS">Kansas</option> 
        <option value="KY">Kentucky</option> 
        <option value="LA">Louisiana</option> 
        <option value="MN">Minnesota</option> 
        <option value="MS">Mississippi</option> 
        <option value="MO">Missouri</option> 
        <option value="OK">Oklahoma</option> 
        <option value="SD">South Dakota</option> 
        <option value="TX">Texas</option> 
        <option value="TN">Tennessee</option> 
        <option value="WI">Wisconsin</option> 
      </optgroup> 
      <optgroup label="Eastern Time Zone"> 
        <option value="CT">Connecticut</option> 
        <option value="DE">Delaware</option> 
        <option value="FL">Florida</option> 
        <option value="GA">Georgia</option> 
        <option value="IN">Indiana</option> 
        <option value="ME">Maine</option> 
        <option value="MD">Maryland</option> 
        <option value="MA">Massachusetts</option> 
        <option value="MI">Michigan</option> 
        <option value="NH">New Hampshire</option> 
        <option value="NJ">New Jersey</option> 
        <option value="NY">New York</option> 
        <option value="NC">North Carolina</option> 
        <option value="OH">Ohio</option> 
        <option value="PA">Pennsylvania</option> 
        <option value="RI">Rhode Island</option> 
        <option value="SC">South Carolina</option> 
        <option value="VT">Vermont</option> 
        <option value="VA">Virginia</option> 
        <option value="WV">West Virginia</option> 
      </optgroup> 
    </select> 
  </div> 
  <h1>这是可清除有提示例子</h1> 
  <div class="s3-example"> 
    <select class="js-example-placeholder-single" style="width:200px"> 
      <optgroup label="Alaskan/Hawaiian Time Zone"> 
        <option value="AK">Alaska</option> 
        <option value="HI">Hawaii</option> 
        <option value="">请选择</option> 
      </optgroup> 
      <optgroup label="Pacific Time Zone"> 
        <option value="CA">California1111111111111111111111111111111111111111111111111</option> 
        <option value="NV">Nevada</option> 
        <option value="OR">Oregon</option> 
        <option value="WA">Washington</option> 
      </optgroup> 
      <optgroup label="Mountain Time Zone"> 
        <option value="AZ">Arizona</option> 
        <option value="CO">Colorado</option> 
        <option value="ID">Idaho</option> 
        <option value="MT">Montana</option> 
        <option value="NE">Nebraska</option> 
        <option value="NM">New Mexico</option> 
        <option value="ND">North Dakota</option> 
        <option value="UT">Utah</option> 
        <option value="WY">Wyoming</option> 
      </optgroup> 
      <optgroup label="Central Time Zone"> 
        <option value="AL">Alabama</option> 
        <option value="AR">Arkansas</option> 
        <option value="IL">Illinois</option> 
        <option value="IA">Iowa</option> 
        <option value="KS">Kansas</option> 
        <option value="KY">Kentucky</option> 
        <option value="LA">Louisiana</option> 
        <option value="MN">Minnesota</option> 
        <option value="MS">Mississippi</option> 
        <option value="MO">Missouri</option> 
        <option value="OK">Oklahoma</option> 
        <option value="SD">South Dakota</option> 
        <option value="TX">Texas</option> 
        <option value="TN">Tennessee</option> 
        <option value="WI">Wisconsin</option> 
      </optgroup> 
      <optgroup label="Eastern Time Zone"> 
        <option value="CT">Connecticut</option> 
        <option value="DE">Delaware</option> 
        <option value="FL">Florida</option> 
        <option value="GA">Georgia</option> 
        <option value="IN">Indiana</option> 
        <option value="ME">Maine</option> 
        <option value="MD">Maryland</option> 
        <option value="MA">Massachusetts</option> 
        <option value="MI">Michigan</option> 
        <option value="NH">New Hampshire</option> 
        <option value="NJ">New Jersey</option> 
        <option value="NY">New York</option> 
        <option value="NC">North Carolina</option> 
        <option value="OH">Ohio</option> 
        <option value="PA">Pennsylvania</option> 
        <option value="RI">Rhode Island</option> 
        <option value="SC">South Carolina</option> 
        <option value="VT">Vermont</option> 
        <option value="VA">Virginia</option> 
        <option value="WV">West Virginia</option> 
      </optgroup> 
    </select> 
  </div> 
  <div class="s4-example"> 
    <select class="js-example-placeholder-multiple" multiple="multiple" style="width:400px"> 
      <optgroup label="Alaskan/Hawaiian Time Zone"> 
        <option value="AK">Alaska</option> 
        <option value="HI">Hawaii</option> 
        <option value="">请选择</option> 
      </optgroup> 
      <optgroup label="Pacific Time Zone"> 
        <option value="CA">California1111111111111111111111111111111111111111111111111</option> 
        <option value="NV">Nevada</option> 
        <option value="OR">Oregon</option> 
        <option value="WA">Washington</option> 
      </optgroup> 
      <optgroup label="Mountain Time Zone"> 
        <option value="AZ">Arizona</option> 
        <option value="CO">Colorado</option> 
        <option value="ID">Idaho</option> 
        <option value="MT">Montana</option> 
        <option value="NE">Nebraska</option> 
        <option value="NM">New Mexico</option> 
        <option value="ND">North Dakota</option> 
        <option value="UT">Utah</option> 
        <option value="WY">Wyoming</option> 
      </optgroup> 
      <optgroup label="Central Time Zone"> 
        <option value="AL">Alabama</option> 
        <option value="AR">Arkansas</option> 
        <option value="IL">Illinois</option> 
        <option value="IA">Iowa</option> 
        <option value="KS">Kansas</option> 
        <option value="KY">Kentucky</option> 
        <option value="LA">Louisiana</option> 
        <option value="MN">Minnesota</option> 
        <option value="MS">Mississippi</option> 
        <option value="MO">Missouri</option> 
        <option value="OK">Oklahoma</option> 
        <option value="SD">South Dakota</option> 
        <option value="TX">Texas</option> 
        <option value="TN">Tennessee</option> 
        <option value="WI">Wisconsin</option> 
      </optgroup> 
      <optgroup label="Eastern Time Zone"> 
        <option value="CT">Connecticut</option> 
        <option value="DE">Delaware</option> 
        <option value="FL">Florida</option> 
        <option value="GA">Georgia</option> 
        <option value="IN">Indiana</option> 
        <option value="ME">Maine</option> 
        <option value="MD">Maryland</option> 
        <option value="MA">Massachusetts</option> 
        <option value="MI">Michigan</option> 
        <option value="NH">New Hampshire</option> 
        <option value="NJ">New Jersey</option> 
        <option value="NY">New York</option> 
        <option value="NC">North Carolina</option> 
        <option value="OH">Ohio</option> 
        <option value="PA">Pennsylvania</option> 
        <option value="RI">Rhode Island</option> 
        <option value="SC">South Carolina</option> 
        <option value="VT">Vermont</option> 
        <option value="VA">Virginia</option> 
        <option value="WV">West Virginia</option> 
      </optgroup> 
    </select> 
  </div> 
  <h1>这是直接使用js对象初始化的例子</h1> 
  <div> 
    <select class="js-example-data-array" style="width:200px"></select> 
  </div> 
  <div> 
    <select class="js-example-data-array-selected" style="width:200px"> 
      <option value="2" selected="selected">duplicate</option> 
    </select> 
  </div> 
 
  <script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
  <script type="text/javascript" src="select2.min.js"></script> 
  <script type="text/javascript"> 
  $(document).ready(function() { 
    $(".js-example-basic-single").select2(); //单选 
    $(".js-example-basic-multiple").select2(); //多选 
 
    $(".js-example-placeholder-single").select2({ //允许清除 
      placeholder: "Select a state", //默认提示语 
      allowClear: true 
    }); 
 
    $(".js-example-placeholder-multiple").select2({ 
      placeholder: "Select a state" //默认提示语 
    }); 
 
 
    var data = [{ 
      id: 0, 
      text: 'enhancement' 
    }, { 
      id: 1, 
      text: 'bug' 
    }, { 
      id: 2, 
      text: 'duplicate' 
    }, { 
      id: 3, 
      text: 'invalid' 
    }, { 
      id: 4, 
      text: 'wontfix' 
    }]; 
 
    $(".js-example-data-array").select2({ 
      data: data 
    }) 
 
    $(".js-example-data-array-selected").select2({ 
      data: data 
    }) 
 
  }); 
  </script> 
</body> 
 
</html>
Salin selepas log masuk

3. Kesan
Kesan 1

Kesan 2

Terdapat juga beberapa kandungan lain, seperti sokongan untuk mengisi melalui carian ajax, sokongan untuk input, dan lain-lain. Rakan-rakan yang ingin tahu lebih lanjut sila baca artikel berkaitan.

Label berkaitan：
javascript kotak pilihan
sumber：php.cn
Artikel sebelumnya：Cara baharu untuk mencipta objek javascript Object.create()_javascript kemahiran Artikel seterusnya：Bagaimana untuk melaksanakan ajax untuk memanggil kaedah yang ditentukan latar belakang berdasarkan JavaScript_jquery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
daripada 2024-04-06 15:35:24
0
1
274
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan