Backend Development
PHP Tutorial
jQuery 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_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>
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1382
52
Alipay PHP SDK transfer error: How to solve the problem of 'Cannot declare class SignData'?
Apr 01, 2025 am 07:21 AM
Alipay PHP...
Explain JSON Web Tokens (JWT) and their use case in PHP APIs.
Apr 05, 2025 am 12:04 AM
JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,
Describe the SOLID principles and how they apply to PHP development.
Apr 03, 2025 am 12:04 AM
The application of SOLID principle in PHP development includes: 1. Single responsibility principle (SRP): Each class is responsible for only one function. 2. Open and close principle (OCP): Changes are achieved through extension rather than modification. 3. Lisch's Substitution Principle (LSP): Subclasses can replace base classes without affecting program accuracy. 4. Interface isolation principle (ISP): Use fine-grained interfaces to avoid dependencies and unused methods. 5. Dependency inversion principle (DIP): High and low-level modules rely on abstraction and are implemented through dependency injection.
Explain the concept of late static binding in PHP.
Mar 21, 2025 pm 01:33 PM
Article discusses late static binding (LSB) in PHP, introduced in PHP 5.3, allowing runtime resolution of static method calls for more flexible inheritance.Main issue: LSB vs. traditional polymorphism; LSB's practical applications and potential perfo
How to automatically set permissions of unixsocket after system restart?
Mar 31, 2025 pm 11:54 PM
How to automatically set the permissions of unixsocket after the system restarts. Every time the system restarts, we need to execute the following command to modify the permissions of unixsocket: sudo...
How to send a POST request containing JSON data using PHP's cURL library?
Apr 01, 2025 pm 03:12 PM
Sending JSON data using PHP's cURL library In PHP development, it is often necessary to interact with external APIs. One of the common ways is to use cURL library to send POST�...
Framework Security Features: Protecting against vulnerabilities.
Mar 28, 2025 pm 05:11 PM
Article discusses essential security features in frameworks to protect against vulnerabilities, including input validation, authentication, and regular updates.
Customizing/Extending Frameworks: How to add custom functionality.
Mar 28, 2025 pm 05:12 PM
The article discusses adding custom functionality to frameworks, focusing on understanding architecture, identifying extension points, and best practices for integration and debugging.
