Werfen wir zunächst einen Blick auf die Darstellungen:
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(){
//移到右边
$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</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>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!
