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
Jul 13, 2016 am 10:13 AM
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>無標(biāo)題文檔</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: "待選區(qū) 搜索：" ,
selectedPosition: 'right',
moveOptions: false,
labelsx: '待選區(qū)',
labeldx: '已選區(qū)'
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select name="searchable[]" id='searchable' multiple='multiple' >
<option value="超級(jí)管理員1">超級(jí)管理員</option>
<option value="普通管理員2">普通管理員</option>
<option value="信息發(fā)布員3">信息發(fā)布員</option>
<option value="財(cái)務(wù)管理員4">財(cái)務(wù)管理員</option>
<option value="產(chǎn)品管理員5">產(chǎn)品管理員</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: "待選區(qū) 搜索：" ,
<span> 8</span> selectedPosition: 'right',
<span> 9</span> moveOptions: <span>false</span>,
<span>10</span> labelsx: '待選區(qū)',
<span>11</span> labeldx: '已選區(qū)'
<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">']; 獲取的是數(shù)組類型option的value值</em></em>
Method 2: Use jquery to implement
<!--方法二，使用jQuery實(shí)現(xiàn)-->
<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 導(dǎo)入jQuery文件</span>
$(<span>function</span><span>(){
</span><span>//</span><span>移到右邊</span>
$('#add').click(<span>function</span><span>() {
</span><span>//</span><span>獲取選中的選項(xiàng)，刪除并追加給對(duì)方</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>獲取全部的選項(xiàng),刪除并追加給對(duì)方</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>雙擊選項(xiàng)</span>
$('#select1').dblclick(<span>function</span>(){ <span>//</span><span>綁定雙擊事件
//獲取全部的選項(xiàng),刪除并追加給對(duì)方</span>
$("option:selected",this).appendTo('#select2'); <span>//</span><span>追加給對(duì)方</span>
<span> });
</span><span>//</span><span>雙擊選項(xiàng)</span>
$('#select2').dblclick(<span>function</span><span>(){
$(</span>"option:selected",this).appendTo('#select1'<span>);
});
});
</span></script><span>
select下拉框內(nèi)容交換開始</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
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
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
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)
PHP Variable Scope Explained
Jul 17, 2025 am 04:16 AM
Common problems and solutions for PHP variable scope include: 1. The global variable cannot be accessed within the function, and it needs to be passed in using the global keyword or parameter; 2. The static variable is declared with static, and it is only initialized once and the value is maintained between multiple calls; 3. Hyperglobal variables such as $_GET and $_POST can be used directly in any scope, but you need to pay attention to safe filtering; 4. Anonymous functions need to introduce parent scope variables through the use keyword, and when modifying external variables, you need to pass a reference. Mastering these rules can help avoid errors and improve code stability.
How to handle File Uploads securely in PHP?
Jul 08, 2025 am 02:37 AM
To safely handle PHP file uploads, you need to verify the source and type, control the file name and path, set server restrictions, and process media files twice. 1. Verify the upload source to prevent CSRF through token and detect the real MIME type through finfo_file using whitelist control; 2. Rename the file to a random string and determine the extension to store it in a non-Web directory according to the detection type; 3. PHP configuration limits the upload size and temporary directory Nginx/Apache prohibits access to the upload directory; 4. The GD library resaves the pictures to clear potential malicious data.
Commenting Out Code in PHP
Jul 18, 2025 am 04:57 AM
There are three common methods for PHP comment code: 1. Use // or # to block one line of code, and it is recommended to use //; 2. Use /.../ to wrap code blocks with multiple lines, which cannot be nested but can be crossed; 3. Combination skills comments such as using /if(){}/ to control logic blocks, or to improve efficiency with editor shortcut keys, you should pay attention to closing symbols and avoid nesting when using them.
How Do Generators Work in PHP?
Jul 11, 2025 am 03:12 AM
AgeneratorinPHPisamemory-efficientwaytoiterateoverlargedatasetsbyyieldingvaluesoneatatimeinsteadofreturningthemallatonce.1.Generatorsusetheyieldkeywordtoproducevaluesondemand,reducingmemoryusage.2.Theyareusefulforhandlingbigloops,readinglargefiles,or
Tips for Writing PHP Comments
Jul 18, 2025 am 04:51 AM
The key to writing PHP comments is to clarify the purpose and specifications. Comments should explain "why" rather than "what was done", avoiding redundancy or too simplicity. 1. Use a unified format, such as docblock (/*/) for class and method descriptions to improve readability and tool compatibility; 2. Emphasize the reasons behind the logic, such as why JS jumps need to be output manually; 3. Add an overview description before complex code, describe the process in steps, and help understand the overall idea; 4. Use TODO and FIXME rationally to mark to-do items and problems to facilitate subsequent tracking and collaboration. Good annotations can reduce communication costs and improve code maintenance efficiency.
Learning PHP: A Beginner's Guide
Jul 18, 2025 am 04:54 AM
TolearnPHPeffectively,startbysettingupalocalserverenvironmentusingtoolslikeXAMPPandacodeeditorlikeVSCode.1)InstallXAMPPforApache,MySQL,andPHP.2)Useacodeeditorforsyntaxsupport.3)TestyoursetupwithasimplePHPfile.Next,learnPHPbasicsincludingvariables,ech
How to access a character in a string by index in PHP
Jul 12, 2025 am 03:15 AM
In PHP, you can use square brackets or curly braces to obtain string specific index characters, but square brackets are recommended; the index starts from 0, and the access outside the range returns a null value and cannot be assigned a value; mb_substr is required to handle multi-byte characters. For example: $str="hello";echo$str[0]; output h; and Chinese characters such as mb_substr($str,1,1) need to obtain the correct result; in actual applications, the length of the string should be checked before looping, dynamic strings need to be verified for validity, and multilingual projects recommend using multi-byte security functions uniformly.
Quick PHP Installation Tutorial
Jul 18, 2025 am 04:52 AM
ToinstallPHPquickly,useXAMPPonWindowsorHomebrewonmacOS.1.OnWindows,downloadandinstallXAMPP,selectcomponents,startApache,andplacefilesinhtdocs.2.Alternatively,manuallyinstallPHPfromphp.netandsetupaserverlikeApache.3.OnmacOS,installHomebrew,thenrun'bre
