jquery.unduplicated plugin นี้สร้างขึ้น เพื่อใช้สำหรับกำหนดเงื่อนไข
ให้กับ element ที่เป็น select option ให้สามารถเลือกรายการใดๆ ได้แค่ครั้งเดียว
จากรายการตัวเลือกชุดเดียวกัน ใช้งานง่าย รองรับการกำหนดค่าเริ่มต้น กรณีใช้ในการ
แก้ไข
การนำไปใช้
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.unduplicated.js"></script>
<script>
$(function(){
// กรณีไม่ได้ กำหนดค่าเริ่มต้น
$(".css_s").unduplicated();
// กรณีกำหนดค่าเริ่มต้น
/* $(".css_s").unduplicated({
initialVal:[2,3,1,4]
});*/
// กรณีกำหนดค่าเริ่มต้น
$(".css_s2").unduplicated({
initialVal:['การตลาด','การบัญชี','การโรงแรม','การเงิน']
});
});
</script>
ดูตัวอย่างได้ท้ายบทความ
ให้เราสร้างไฟล์ชื่อ jquery.unduplicated.js ดังนี้
// jQuery Unduplicated Plugin 09/07/2017
// www.ninenik.com
(function($){
// setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า setbackground
$.fn.unduplicated = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
var defaults={
initialVal:null
};
// ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
var settings = $.extend( {}, defaults, options );
var arrSelectVal=[];
var optionsObj = this.find("option");
$(this).on("change",function(){
arrSelectVal=[];
var indexThis = $(".css_unduplicated").index(this);
$(".css_unduplicated").each(function(i,k){
var optionHtml="";
var prevObj = $(".css_unduplicated:lt("+i+")").length;
var prevVal = $(".css_unduplicated:eq("+(i-1)+")").val();
if(prevObj>0){
arrSelectVal.push(prevVal);
}
if(i>0 && i!=indexThis && i>indexThis){
$.each(optionsObj,function(s,html){
if(arrSelectVal.indexOf($(html).val())==-1){
optionHtml+=html.outerHTML;
}
});
}
if(optionHtml!=""){
$(this).html(optionHtml);
}
});
});
/// คืนค่ากลับ การทำงานของ plugin
return this.each(function(j,k) {
$(this).addClass("css_unduplicated");
var optionHtml="";
var prevObj = $(".css_unduplicated:lt("+j+")").length;
var prevVal = $(".css_unduplicated:eq("+(j-1)+")").val();
if(prevObj>0){
arrSelectVal.push(prevVal);
}
if(j>0){
$.each(optionsObj,function(s,html){
if(arrSelectVal.indexOf($(html).val())==-1){
optionHtml+=html.outerHTML;
}
});
}
if(optionHtml!=""){
$(this).html(optionHtml);
}
if(settings.initialVal!=null){
var setVal = settings.initialVal[j];
$(this).val(setVal);
}
});
};
})(jQuery);
ตัวอย่างไฟล์ทดสอบ demo_unduplicated.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<div class="container" style="margin:auto;width:400;text-align:left;">
<select name="s1" class="css_s form-control input-sm" style="width:100px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<select name="s2" class="css_s form-control input-sm" style="width:100px;">
</select>
<br>
<select name="s3" class="css_s form-control input-sm" style="width:100px;">
</select>
<br>
<select name="s4" class="css_s form-control input-sm" style="width:100px;">
</select>
<br>
<a href="duplicate_restrict.php?<?=time()?>">Reload</a>
</div>
<br>
<div class="container" style="margin:auto;width:400;text-align:left;">
<select name="s1" class="css_s2 form-control input-sm" style="width:100px;">
<option value="การเงิน">การเงิน</option>
<option value="การบัญชี">การบัญชี</option>
<option value="การโรงแรม">การโรงแรม</option>
<option value="การตลาด">การตลาด</option>
</select>
<br>
<select name="s2" class="css_s2 form-control input-sm" style="width:100px;">
</select>
<br>
<select name="s3" class="css_s2 form-control input-sm" style="width:100px;">
</select>
<br>
<select name="s4" class="css_s2 form-control input-sm" style="width:100px;">
</select>
<br>
<a href="duplicate_restrict.php?<?=time()?>">Reload</a>
</div>
<script src="js/jquery.unduplicated.js"></script>
<script>
$(function(){
// กรณีไม่ได้ กำหนดค่าเริ่มต้น
$(".css_s").unduplicated();
// กรณีกำหนดค่าเริ่มต้น
/* $(".css_s").unduplicated({
initialVal:[2,3,1,4]
});*/
// กรณีกำหนดค่าเริ่มต้น
$(".css_s2").unduplicated({
initialVal:['การตลาด','การบัญชี','การโรงแรม','การเงิน']
});
});
</script>
</body>
</html>
สังเกตว่า เราต้องกำหนด css class ให้กับชุดรายการ select ให้เหมือนกันเพื่ออ้างอิง selector
อย่างอันแรกเราใช้ css_s ตัวที่สองเราใช้ css_s2 ชื่อ css class นี้เรากำหนดค่าเป็นค่าที่ต้องการก็ได้
ไม่จำเป็นต้องใช้ตามตัวอย่าง
