عرض سلكت بوكس

[Master_MTA]

سلام عليكم وانا اسوي مشروع بسيط اليوم سويت سيليكت بوكس بسيطه خذها وجربها

html-css-javascript(jquery)

الاكواد ما بطول عليكم

html

				<div class='dropdown'>
				
					<div class='shownelement' name='shownelement' >1</div>
					<div class='hiddenelements'>2</div>
					<div class='hiddenelements'>3</div>
					<div class='hiddenelements'>4</div>
					<div class='hiddenelements'>5</div>
					<div class='hiddenelements'>6</div>
					<div class='hiddenelements'>7</div>
					<div class='hiddenelements'>8</div>
					<div class='hiddenelements'>9</div>
					<div class='hiddenelements'>10</div>
				
				</div>

css

.dropdown{
	
	width:200px;
			
	padding: 5px;
	
}

.dropdown .shownelement{
	
	background: #134787;
	
	padding: 10px;
	
	color: white;
	
	cursor: pointer;

}


.dropdown .hiddenelements{
	
	display:none;
	
	padding: 10px;
	
	background: white;
	
	color: #134787;
	
	font-size: 17px;

	
}





.dropdown .hiddenelements:hover{
	
	
	background: #134787;
	
	color: white;
	
	cursor: pointer;
	
}

javascript

		
			$(document).ready(function(){
    
				$('.dropdown .shownelement').click(function(event){
				
					$('.hiddenelements:visible').slideToggle();
				
					$('.hiddenelements:hidden',$(this).parent()).slideToggle();
					
				    event.stopPropagation();

				});
				
		
				$('.hiddenelements').click(function(event){
					
					var mytext=$('.shownelement',$(this).parent()).text();
					
					$('.shownelement',$(this).parent()).text($(this).text());
					
					$(this).text(mytext);
					
					$(this).parent().$('.hiddenelements').slideToggle();
					
					event.stopPropagation();
					
				});
			
			});
			
			
				$(document).click(function() {
						
						$('.hiddenelements:visible').slideToggle();
			
				});

بالتوفيق

[iMr.WiFi..!]

لو تعرض صورة للنتيجة راح تكون اضافة جميلة للموضوع, وشكراً لك

[Master_MTA]

12 hours ago, iMr.WiFi..! said:

لو تعرض صورة للنتيجة راح تكون اضافة جميلة للموضوع, وشكراً لك

https://f.top4top.net/p_990ddv8q1.png

https://a.top4top.net/p_9906o43p2.png

https://b.top4top.net/p_9900wm543.png

https://c.top4top.net/p_990f27nh4.png

[KhaledX]

11 hours ago, Master_MTA said:

https://f.top4top.net/p_990ddv8q1.png

https://a.top4top.net/p_9906o43p2.png

https://b.top4top.net/p_9900wm543.png

https://c.top4top.net/p_990f27nh4.png

جامعة بدر بالقاهره 

 

بدر ولا فهد ههاهاهاهاهها

[iMr.WiFi..!]

45 minutes ago, SuperX said:

جامعة بدر بالقاهره 

 

بدر ولا فهد ههاهاهاهاهها

الرجاء نقل التعليق اعلاه الى الموضوع التالي:

 

[Master_MTA]

4 hours ago, SuperX said:

بدر ولا فهد ههاهاهاهاهها

يكفي كلام وايفاي

ذذ

3 hours ago, iMr.WiFi..! said:

الرجاء نقل التعليق اعلاه الى الموضوع التالي:

زين التصميم اتوقع ولا وش رايك؟

[iMr.WiFi..!]

16 hours ago, Master_MTA said:

يكفي كلام وايفاي

ذذ

زين التصميم اتوقع ولا وش رايك؟

جميل صراحةً

[#StrOnG_,)]

On 18/09/2018 at 04:08, Master_MTA said:

https://f.top4top.net/p_990ddv8q1.png

https://a.top4top.net/p_9906o43p2.png

https://b.top4top.net/p_9900wm543.png

https://c.top4top.net/p_990f27nh4.png

cobra kai شايف الصدفة؟ انا كنت ابي اشوف المسلسل

تنصحني فيه؟

[Master_MTA]

9 minutes ago, #StrOnG_,) said:

المسلسل

انا اللي غلطان ههههه يب انصحك فيه صراحه

[#StrOnG_,)]

1 minute ago, Master_MTA said:

انا اللي غلطان ههههه يب انصحك فيه صراحه

هههههههههههههههههههههههههههههههههههههه

[el8rbawy]

بسم الله مشاء الله علي التصميم انت دمرت شئ اسمه

ux/ui 
بس تسلم يابطل

[Master_MTA]

20 hours ago, NitroNN said:

بس تسلم يابطل

الله يسلمك مشكور يقلبي