PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


สร้าง jquery plugin เลือกรายการ จากตัวเลือกแบบไม่ให้ซ้ำกันอย่างง่าย

09 July 2017 By
jquery jquery plugin unduplicated


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 นี้เรากำหนดค่าเป็นค่าที่ต้องการก็ได้
ไม่จำเป็นต้องใช้ตามตัวอย่าง

 









Tags:: jquery jquery plugin unduplicated






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง