Verwenden Sie jQuery, um ein einfaches Beispiel für ein Dropdown-Feld zu erstellen-js-Tutorial-php.cn

Verwenden Sie jQuery, um ein einfaches Beispiel für ein Dropdown-Feld zu erstellen

怪我咯

Freigeben： 2017-03-31 09:22:00

Original

1230 Leute haben es durchsucht

Werfen wir zunächst einen Blick auf die Darstellungen:

Verwenden Sie jQuery, um ein einfaches Beispiel für ein Dropdown-Feld zu erstellen

Jeder muss schon einmal Webseiten mit ähnlichen Effekten gesehen haben Um dies zu erreichen, ist der Code sehr einfach:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
p.centent {
  float:left;
  text-align: center;
  margin: 10px;
}
span { 
 display:block; 
 margin:2px 2px;
 padding:4px 10px; 
 background:#898989;
 cursor:pointer;
 font-size:12px;
 color:white;
}
</style>
<!--  引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 //移到右边
 $(&#39;#add&#39;).click(function() {
 //获取选中的选项，删除并追加给对方
 $(&#39;#select1 option:selected&#39;).appendTo(&#39;#select2&#39;);
 });
 //移到左边
 $(&#39;#remove&#39;).click(function() {
 $(&#39;#select2 option:selected&#39;).appendTo(&#39;#select1&#39;);
 });
 //全部移到右边
 $(&#39;#add_all&#39;).click(function() {
 //获取全部的选项,删除并追加给对方
 $(&#39;#select1 option&#39;).appendTo(&#39;#select2&#39;);
 });
 //全部移到左边
 $(&#39;#remove_all&#39;).click(function() {
 $(&#39;#select2 option&#39;).appendTo(&#39;#select1&#39;);
 });
 //双击选项
 $(&#39;#select1&#39;).dblclick(function(){ //绑定双击事件
 //获取全部的选项,删除并追加给对方
 $("option:selected",this).appendTo(&#39;#select2&#39;); //追加给对方
 });
 //双击选项
 $(&#39;#select2&#39;).dblclick(function(){
  $("option:selected",this).appendTo(&#39;#select1&#39;);
 });
});
</script>

</head>
<body>
 <p class="centent">
 <select multiple="multiple" id="select1" style="width:100px;height:160px;">
  <option value="1">曹操</option>
  <option value="2">曹昂</option>
  <option value="3">曹丕</option>
  <option value="4">曹彰</option>
  <option value="5">曹植</option>
  <option value="6">曹熊</option>
  <option value="7">曹仁</option>
  <option value="8">曹洪</option>
  <option value="9">曹休</option>
  <option value="10">曹真</option>
  <option value="11">曹爽</option>
 </select>
 <p>
  <span id="add" >选中添加到右边>></span>
  <span id="add_all" >全部添加到右边>></span>
 </p>
 </p>
 <p class="centent">
 <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
  <option value="12">曹芳</option>
 </select>
 <p>
  <span id="remove"><<选中删除到左边</span>
  <span id="remove_all"><<全部删除到左边</span>
 </p>
 </p>
</body>
</html>

Nach dem Login kopieren

Durch den Code implementierte Funktion:

1), die ausgewählte Option zur anderen Partei hinzufügen

2), alle Optionen hinzufügen Zur anderen Partei hinzufügen

3), doppelklicken Sie auf eine Option, um sie der anderen Partei hinzuzufügen

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um ein einfaches Beispiel für ein Dropdown-Feld zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!