  | 
              
	              
	                
  
    
	 
        ช่วยหน่อยคครับ ต้องการ ให้ ลิส เมนู เลือกรายการที่ซ้ำ กันไม่ได้ ครับ ช่วยชี้แนะหน่อยครับ     | 
   
  
    |   | 
   
 
 
 
              
  
          
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                 หลักการ 
var selectAbles = [1, 2, 3, 4, 5, 6, 7, n]; 
แล้วเวลาเลือกก็ไปตัดออก  
จาก selectAbles  
เวลาไม่เลือก ก็ push กลับไป 
แล้วทุกๆครั้งที่ onchange ก็เอา selectAbles ไป สร้าง option ของ select ตัวอื่นๆ 
 
ปล ขี้เกียจอ่านโค๊ด                        
               
               | 
             
            
              
			                              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2018-09-17 17:48:23 | 
                        By :
                            DK | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
               
		
     
		
	     
	    
     
               
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                 ลองดูตัวอย่างนี้ครับ 
 
https://teamtreehouse.com/community/disable-a-selected-option-if-is-selected-already 
 
Code 
<h4 class="info-text">Select 1st Employee<br> 
    <select name="wcl-employees1" id="wcl-employees1"> 
        <option value="" disabled="" selected="" style="display:none;">Select One...</option> 
        <option value="ALCANTARA, ERIC">ALCANTARA, ERIC</option> 
        <option value="ALDRIGE, ,MERANDA">ALDRIGE, ,MERANDA</option> 
        <option value="ALTOBELLI, JAMES">ALTOBELLI, JAMES</option> 
    </select> 
</h4> 
<h4 class="info-text">Select 2nd Employee<br> 
    <select name="wcl-employees2" id="wcl-employees2"> 
        <option value="" disabled="" selected="" style="display:none;">Select One...</option> 
        <option value="ALCANTARA, ERIC">ALCANTARA, ERIC</option> 
        <option value="ALDRIGE, ,MERANDA">ALDRIGE, ,MERANDA</option> 
        <option value="ALTOBELLI, JAMES">ALTOBELLI, JAMES</option> 
    </select> 
</h4> 
<h4 class="info-text">Select 3rd Employee<br> 
    <select name="wcl-employees3" id="wcl-employees3"> 
        <option value="" disabled="" selected="" style="display:none;">Select One...</option> 
        <option value="ALCANTARA, ERIC">ALCANTARA, ERIC</option> 
        <option value="ALDRIGE, ,MERANDA">ALDRIGE, ,MERANDA</option> 
        <option value="ALTOBELLI, JAMES">ALTOBELLI, JAMES</option> 
    </select> 
</h4>  
 
 
Code (JavaScript) 
var $select = $("select");
$select.on("change", function() {
    var selected = [];  
    $.each($select, function(index, select) {           
        if (select.value !== "") { selected.push(select.value); }
    });         
   $("option").prop("disabled", false);         
   for (var index in selected) { $('option[value="'+selected[index]+'"]').prop("disabled", true); }
});
                        
               
               | 
             
            
              
			                              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2018-09-18 09:17:13 | 
                        By :
                            {Cyberman} | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
               
		
     
		
	  
        
             | 
            | 
            | 
             | 
         
        
             | 
                       | 
          
            
               
                 @เจ้าของกระทู้ ไม่รู้ว่าไปไม่ถูก หรือ ขี้เกียจกันแน่นะครับ ถ้าอยากสะดวก เอาแบบ ความคิดเห็นด้านบนก็ได้ ก็แค่ disable มันสิ 
แต่ถ้าอยากจะเอาออกจริงๆ อะผมเขียนเป็นไกด์  
 
ปล ถ้าแค่ขี้เกียจก็เลิกเขียนโปรแกรมไปเถอะ 
 
Code (JavaScript) 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<select class="selectInput">
</select>
<select class="selectInput">
</select>
<select class="selectInput">
</select>
<select class="selectInput">
</select>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        var selectAbles = [1, 2, 3, 4, 5, 6, 7];
        var previous = 0;
        initialValue();
        function initialValue() {
            $.each($('.selectInput'), function () {
                var select = 0;
                if ($(this).val()) {
                    select = $(this).val();
                }
                renderOption($(this), select);
            });
        }
        function renderOption(input, select) {
            input.empty();
            if (select) {
                input.append($("<option></option>").attr("value", select).text(select));
            } else {
                input.append($("<option></option>").attr("value", "").text(""));
            }
            $.each(selectAbles, function (k, v) {
                input.append($("<option></option>")
                    .attr("value", v)
                    .text(v));
            });
        }
        function remove(v) {
            var index = getIndex(v);
            selectAbles.splice(index, 1);
        }
        function add(v) {
            selectAbles.push(v);
            selectAbles.sort();
            previous = 0;
        }
        function getIndex(val) {
            for (key in selectAbles) {
                if (selectAbles[key] == val) {
                    return key;
                }
            }
            return false;
        }
        $('.selectInput').on("click", function () {
            if ($(this).val() != "") {
                previous = $(this).val();
            }
        });
        $('.selectInput').change(function () {
            remove($(this).val());
            if (previous) {
                add(previous);
            }
            initialValue();
        });
    });
</script>
</html>
                        
               
               | 
             
            
              
			                              
                              
              
                
                     | 
                     | 
                     | 
                 
                
                     | 
                  
                      
                        | Date :
                            2018-09-18 10:15:59 | 
                        By :
                            DK | 
                         
                    | 
                     | 
                 
                
                     | 
                     | 
                     | 
                 
                | 
             
           
			         | 
             | 
         
        
             | 
            | 
             | 
             | 
         
          
	    
     
      		  
	
     | 
   
 
                 |