jquery.unduplicated plugin นี้สร้างขึ้น เพื่อใช้สำหรับกำหนดเงื่อนไข
ให้กับ element ที่เป็น select option ให้สามารถเลือกรายการใดๆ ได้แค่ครั้งเดียว
จากรายการตัวเลือกชุดเดียวกัน ใช้งานง่าย รองรับการกำหนดค่าเริ่มต้น กรณีใช้ในการ
แก้ไข
การนำไปใช้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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 ดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | // 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></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 นี้เรากำหนดค่าเป็นค่าที่ต้องการก็ได้
ไม่จำเป็นต้องใช้ตามตัวอย่าง
