Backend DevelopmentPHP TutorialjQuery plug-in implements left and right selection of select drop-down box_exchange content (multiselect2side), jqueryselect plug-in_PHP tutorialjQuery plug-in implements left and right selection of select drop-down box_exchange content (multiselect2side), jqueryselect plug-in_PHP tutorial
jQuery plug-in implements left and right selection of select drop-down box_exchange content (multiselect2side), jqueryselect plug-in
Rendering:
Use jQuery plug-in ---multiselect2side method:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="jquery.multiselect2side.css" type="text/css" />
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.multiselect2side.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#searchable').multiselect2side({
search: "待选区 搜索：" ,
selectedPosition: 'right',
moveOptions: false,
labelsx: '待选区',
labeldx: '已选区'
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select name="searchable[]" id='searchable' multiple='multiple' >
<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>
</select>
</td>
</tr>
<tr>
<td><p id="stat"></p></td>
</tr>
</table>
</body>
</html>
Analysis:
head header import
jquery.multiselect2side.css file
jquery-1.6.4.min.js jquery file
jquery.multiselect2side.js file
**Note: jquery file must be in Import before jquery.multiselect2side.js
Write a js to call the multiselect2side method, parameter description
search: "Search for the selected area:" The parameter is to add the search area
selectedPosition: 'right', the parameter is to add the right drop-down box selection position (required )
moveOptions: Move options, which can be used to sort options. It has little practical significance. Here it is set to false
labelsx and labeldx are used to set the titles of the left and right list boxes. If not needed, they can be set to Empty
maxSelected: The maximum number of options, that is, only a few can be selected at most
Project 1
<em><span> 2</span> <script type="text/javascript" src="/Public/Js/jquery-1.6.4.min.js"></script>
<span> 3</span> <script type="text/javascript" src="/Public/Js/jquery.multiselect2side.js"></script>
<span> 4</span> <script type="text/javascript">
<span> 5</span> $().ready(<span>function</span><span>() {
</span><span> 6</span> $('#searchable').<span>multiselect2side({
</span><span> 7</span> search: "待选区 搜索：" ,
<span> 8</span> selectedPosition: 'right',
<span> 9</span> moveOptions: <span>false</span>,
<span>10</span> labelsx: '待选区',
<span>11</span> labeldx: '已选区'
<span>12</span> <span> });
</span><span>13</span>
<span>14</span> <span> });
</span><span>15</span> </script>
<span>16</span> <br /> <form action="/admin/System/add?ac=insert" id="frm" method="post" enctype="multipart/form-data">
<span>17</span> <select name="searchable[]" id='searchable' multiple='multiple' >
<span>18</span> <<span>if</span> condition="!empty(<span>$mod_user</span>)">
<span>19</span> <option value="0">全部</option>
<span>20</span> <volist name="mod_user" id="vo">
<span>21</span> <option value="{<span>$vo</span>.userid}">{<span>$vo</span>.nickname}</option>
<span>22</span> </volist>
<span>23</span> <<span>else</span> />
<span>24</span> <span> 未找到用户
</span><span>25</span> </<span>if</span>>
<span>26</span> </select><br /></form><br /><br />页面获取值使用 $ser=$_POST['</em>searchable<em id="__mceDel"><em id="__mceDel">']; 获取的是数组类型option的value值</em></em>
Method 2: Use jquery to implement
<!--方法二，使用jQuery实现-->
<style type="text/css">
<span>#</span><span>one{width:200px; height:180px; float:left}</span><span>
#</span><span>two{width:50px; height:180px; float:left}</span><span>
#</span><span>three{width:200px; height:180px; float:left}</span>
.btn{width:50px; height:30px; margin-top:10px; cursor:<span>pointer;}
</span></style>
<script type="text/javascript">
<span>//</span><span>下拉框交换JQuery 导入jQuery文件</span>
$(<span>function</span><span>(){
</span><span>//</span><span>移到右边</span>
$('#add').click(<span>function</span><span>() {
</span><span>//</span><span>获取选中的选项，删除并追加给对方</span>
$('#select1 option:selected').appendTo('#select2'<span>);
});
</span><span>//</span><span>移到左边</span>
$('#remove').click(<span>function</span><span>() {
$(</span>'#select2 option:selected').appendTo('#select1'<span>);
});
</span><span>//</span><span>全部移到右边</span>
$('#add_all').click(<span>function</span><span>() {
</span><span>//</span><span>获取全部的选项,删除并追加给对方</span>
$('#select1 option').appendTo('#select2'<span>);
});
</span><span>//</span><span>全部移到左边</span>
$('#remove_all').click(<span>function</span><span>() {
$(</span>'#select2 option').appendTo('#select1'<span>);
});
</span><span>//</span><span>双击选项</span>
$('#select1').dblclick(<span>function</span>(){ <span>//</span><span>绑定双击事件
//获取全部的选项,删除并追加给对方</span>
$("option:selected",this).appendTo('#select2'); <span>//</span><span>追加给对方</span>
<span> });
</span><span>//</span><span>双击选项</span>
$('#select2').dblclick(<span>function</span><span>(){
$(</span>"option:selected",this).appendTo('#select1'<span>);
});
});
</span></script><span>
select下拉框内容交换开始</span>-->
<!-- <table width="500" align="center" border="0" cellpadding="0" cellspacing="0" <span>class</span>="newContTab">
<tr>
<td><div>
<div>
<select multiple="multiple" id="select1">if</span> condition="!empty(<span>$mod_user</span>)">
<option value="0">全部</option>
<volist name="mod_user" id="vo">
<option value="{<span>$vo</span>.userid}">{<span>$vo</span>.nickname}</option>
</volist>
<<span>else</span> /><span>
未找到用户
</span></<span>if</span>>
</select>
</div>
<div>class</span>="btn" value=">"/>
</span><br />
<span id="add_all">
<input type="button" <span>class</span>="btn" value=">>"/>
</span> <br />
<span id="remove">
<input type="button" <span>class</span>="btn" value="<"/>
</span><br />
<span id="remove_all">
<input type="button" <span>class</span>="btn" value="<<"/>
</span> </div>
<div>
<select multiple="multiple" id="select2">
$(</span><span>function</span><span>(){
$(</span>'#sub').click(<span>function</span><span>(){
</span><span>var</span> uidlist=$('#searchable').<span>val();
</span><span>var</span> midlist=$('#select4').<span>val();
</span><span>var</span> content=$('#content').<span>val();
</span><span>var</span> pushtime=$('#pushtime').<span>val();
</span><span>var</span> image=$('#image').<span>val();
$(</span>'#uidlist').<span>val(uidlist);
});
});
</span></script>
The Continued Use of PHP: Reasons for Its EnduranceApr 19, 2025 am 12:23 AMWhat’s still popular is the ease of use, flexibility and a strong ecosystem. 1) Ease of use and simple syntax make it the first choice for beginners. 2) Closely integrated with web development, excellent interaction with HTTP requests and database. 3) The huge ecosystem provides a wealth of tools and libraries. 4) Active community and open source nature adapts them to new needs and technology trends.
PHP and Python: Exploring Their Similarities and DifferencesApr 19, 2025 am 12:21 AMPHP and Python are both high-level programming languages that are widely used in web development, data processing and automation tasks. 1.PHP is often used to build dynamic websites and content management systems, while Python is often used to build web frameworks and data science. 2.PHP uses echo to output content, Python uses print. 3. Both support object-oriented programming, but the syntax and keywords are different. 4. PHP supports weak type conversion, while Python is more stringent. 5. PHP performance optimization includes using OPcache and asynchronous programming, while Python uses cProfile and asynchronous programming.
PHP and Python: Different Paradigms ExplainedApr 18, 2025 am 12:26 AMPHP is mainly procedural programming, but also supports object-oriented programming (OOP); Python supports a variety of paradigms, including OOP, functional and procedural programming. PHP is suitable for web development, and Python is suitable for a variety of applications such as data analysis and machine learning.
PHP and Python: A Deep Dive into Their HistoryApr 18, 2025 am 12:25 AMPHP originated in 1994 and was developed by RasmusLerdorf. It was originally used to track website visitors and gradually evolved into a server-side scripting language and was widely used in web development. Python was developed by Guidovan Rossum in the late 1980s and was first released in 1991. It emphasizes code readability and simplicity, and is suitable for scientific computing, data analysis and other fields.
Choosing Between PHP and Python: A GuideApr 18, 2025 am 12:24 AMPHP is suitable for web development and rapid prototyping, and Python is suitable for data science and machine learning. 1.PHP is used for dynamic web development, with simple syntax and suitable for rapid development. 2. Python has concise syntax, is suitable for multiple fields, and has a strong library ecosystem.
PHP and Frameworks: Modernizing the LanguageApr 18, 2025 am 12:14 AMPHP remains important in the modernization process because it supports a large number of websites and applications and adapts to development needs through frameworks. 1.PHP7 improves performance and introduces new features. 2. Modern frameworks such as Laravel, Symfony and CodeIgniter simplify development and improve code quality. 3. Performance optimization and best practices further improve application efficiency.
PHP's Impact: Web Development and BeyondApr 18, 2025 am 12:10 AMPHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip
How does PHP type hinting work, including scalar types, return types, union types, and nullable types?Apr 17, 2025 am 12:25 AMPHP type prompts to improve code quality and readability. 1) Scalar type tips: Since PHP7.0, basic data types are allowed to be specified in function parameters, such as int, float, etc. 2) Return type prompt: Ensure the consistency of the function return value type. 3) Union type prompt: Since PHP8.0, multiple types are allowed to be specified in function parameters or return values. 4) Nullable type prompt: Allows to include null values and handle functions that may return null values.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
Dreamweaver Mac version
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
