PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สอบถามวิธีการ disabled select option ด้วย jQuery

สอบถามวิธีการ disabled select option ด้วย jQuery
ผมทำฟอร์ม ให้ เลือ หมวดหมู่ แล้ว สามารถเพิ่ม ได้ มากกว่า กว่า หนึ่ง โดยทำ เป็น  select option ไว้ แล้ว เพิ่มแถวด้วย  jquery  แล้ว อยากให้ มีการ  disabled
ช่อง ที่ เคยเลือไปแล้ว นะครับ ว่ามีวิธีการอย่างไร

โค้ด select option ที่ผมทำไว้ 
<script type="text/javascript">

   $(document).ready(function() {
	$("#AddMoreCateory").click(function() { 
           if($(".form-group").size() < 7) {
		$("#CategoryWrapper").append(
	           '<div class="form-group">'+
		   '<div class="input-group">'+
		   '<select class="form-control" name="cateory[]" >'+
		   '<option value="">-- โปรดเลือก --</option>'+
		   '<option value="1">หมวดหมู่1</option>'+
		   '<option value="2">หมวดหมู่2</option>'+
		   '<option value="3">หมวดหมู่3</option>'+
		   '<option value="4">หมวดหมู่4</option>'+
		   '<option value="5">หมวดหมู่5</option>'+
		   '<option value="6">หมวดหมู่6</option>'+
		   '<option value="7">หมวดหมู่7</option>'+
		   '</select>'+
		   '<div class="RemoveCateory input-group-addon"> - </div>'+
		   '<input type="hidden" name="h_item_id[]" value="">'+
		   '</div>'+
		   '</div>'
		);
	}
});

$("#CategoryWrapper").on("click",".RemoveCateory", function(){ 
if( $(".form-group").size() > 1 ) {
	$(this).parents('.form-group').remove(); 
}
return false;
});
});
</script>
 
<div class="row">
		<label class="col-md-1" for="cateory">หมวดหมู่<span style="color: red;">*</span></label>
		<div id="CategoryWrapper" class="col-md-4">
			<div class="form-group">
				<div class="input-group">
					<select class="form-control" name="cateory[]" >
						<option value="">-- โปรดเลือก --</option>
						<option value="1">หมวดหมู่1</option>
						<option value="2">หมวดหมู่2</option>
						<option value="3">หมวดหมู่3</option>
						<option value="4">หมวดหมู่4</option>
						<option value="5">หมวดหมู่5</option>
						<option value="6">หมวดหมู่6</option>
						<option value="7">หมวดหมู่7</option>
					</select>
					<div id="AddMoreCateory" class="input-group-addon"> + </div>
					<input type="hidden" name="h_item_id[]" value="">
				</div>
			</div>			
		</div>
	</div>


โดย:  Wowowow IP: 171.96.245.xxx วันที่: 09-08-2014 เวลา: 16:30:56

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 3
ขอบคุณครับ เดี๋ยวจะลองเอาไปประยุกต์ ดูครับ

โดย:  Wowowow IP: 171.96.245.xxx วันที่: 09-08-2014 เวลา: 22:44:56
 ความคิดเห็นที่ 2
โค้ดและตัวอย่างเป็นแนวทาง

<!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> </title>

</head>

<body>


<div class="row">
		<label class="col-md-1" for="cateory">หมวดหมู่<span style="color: red;">*</span></label>
		<div id="CategoryWrapper" class="col-md-4">
			<div class="form-group">
				<div class="input-group">
					<select class="form-control" name="cateory[]" >
						<option value="">-- โปรดเลือก --</option>
						<option value="1">หมวดหมู่1</option>
						<option value="2">หมวดหมู่2</option>
						<option value="3">หมวดหมู่3</option>
						<option value="4">หมวดหมู่4</option>
						<option value="5">หมวดหมู่5</option>
						<option value="6">หมวดหมู่6</option>
						<option value="7">หมวดหมู่7</option>
					</select>
					<div id="AddMoreCateory" class="input-group-addon"> + </div>
					<input type="hidden" name="h_item_id[]" value="">
				</div>
			</div>			
		</div>
	</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	
});
</script>

<script type="text/javascript">
$(document).ready(function() {
	
		var showlistOption="";
		var mylistOption=[];	
		mylistOption[0]="<option value=\"1\">หมวดหมู่1</option>";
		mylistOption[1]="<option value=\"2\">หมวดหมู่2</option>";
		mylistOption[2]="<option value=\"3\">หมวดหมู่3</option>";
		mylistOption[3]="<option value=\"4\">หมวดหมู่4</option>";
		mylistOption[4]="<option value=\"5\">หมวดหมู่5</option>";
		mylistOption[5]="<option value=\"6\">หมวดหมู่6</option>";
		mylistOption[6]="<option value=\"7\">หมวดหมู่7</option>";
		

		var uselistOption=[];	
		
		showlistOption = function(mylistOption,uselistOption){
			if(uselistOption.length==0){
				return mylistOption.join("");
			}else{
				var returnOption="";
				for(i=0;i<mylistOption.length;i++){
					var tempI=i+1;
					if(uselistOption.indexOf(tempI.toString())>-1){
						
					}else{
						returnOption+=mylistOption[i];
					}
				}
				return returnOption;
			}
		}		
	
		$("#AddMoreCateory").click(function() { 
			if($(".form-group").size() < 7) {
				var has_noSelected=0;
				$(".form-control").each(function(i,k){
					if($(".form-control").eq(i).val()==""){
						has_noSelected++;
					}
				});				
				if(has_noSelected==0){
					$("#CategoryWrapper").append(
						'<div class="form-group">'+
						'<div class="input-group">'+
						'<select class="form-control" name="cateory[]" >'+
						'<option value="">-- โปรดเลือก --</option>'+
						showlistOption(mylistOption,uselistOption)+
						'</select>'+
						'<div class="RemoveCateory input-group-addon"> - </div>'+
						'<input type="hidden" name="h_item_id[]" value="">'+
						'</div>'+
						'</div>'
					);
				}else{
					alert("โปรดเลือกรายการ");
				}
			}
		});
	
	$(document).on("change",".form-control",function(){
		var keyObj=$(".form-control").index(this);
		var valObj=$(this).val();
		uselistOption[keyObj]=valObj;
		if(valObj!=""){
			$(".form-control option").not(":selected").remove();
		}
		console.log(uselistOption);
		$(".form-control").each(function(i,k){
			if($(".form-control").eq(i).val()==uselistOption[i]){
				
			}else{
			
			}
		});

	});

	$("#CategoryWrapper").on("click",".RemoveCateory", function(){ 
		if( $(".form-group").size() > 1 ) {	
			$(this).parents('.form-group').remove(); 
			uselistOption=[];	
			$(".form-control").each(function(i,k){
				uselistOption[i]=$(".form-control").eq(i).val();				
			});					
		}
		return false;
	});
});
</script>
</body>
</html>


ตัวอย่าง

+


โดย:  Ninenik IP: 1.47.144.xxx วันที่: 09-08-2014
 ความคิดเห็นที่ 1
เท่าที่ดู การเลือกแบบนี้ ถ้าสามารถแก้ไขได้ ก็จะไม่มีทางสิ้นสุดเงื่อนไขง่ายๆ 
ถ้าเป็นไอเดีย 
1. ก่อนเพิ่มลิสรายการ ใหม่ ลิสรายการแรกต้องถูกเลือกก่อน พอเลือกแล้ว จะไม่สามารถแก้ไขได้
2. เมื่อกดเพิ่มลิสรายการใหม่ option ลิสรายการที่สอง ต้องตัด option ที่เลือกแล้ว ออก พอเลือกแล้ว จะไม่สามารถแก้ไขได้
3. หากมีการลบ ลิสรายการที่เพิ่มมาใหม่ออก  option ของลิสรายการที่ถูกลบ ต้องสามารถเอามาใช้ได้ ถ้ามีการเพิ่มลิสรายการใหม่อีกครั้ง

โดย:  Ninenik IP: 1.47.144.xxx วันที่: 09-08-2014