الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

كيف يمكن إضافة الالوان لل drop down

بدأه طارق إبراهيم في 4 مايو 2011 · 6 رد · 1,090 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

أريد ان يتمكن المستخدم من اختيار الالوان من قائمة منسدلة dropdown بإستخدام ال select tag

و عليها فسأقوم بتنفيذ كود جافا سكربت محدد علماً بإنه لدى قائمة ألوان محددة يتم استخدامهاو لا أود إظهار الالوان كنصوص بل كألوان او صور يتم عمل select لها

تم تعديل هذه المشاركة بواسطة طارق إبراهيم في 4 مايو 2011 في 17:50

Technical Lead Developer

My LinkedIn Profile

اللهم قنى شر الجهل و الجهلاء

( اقْتَرَبَ لِلنَّاسِ حِسَابُهُمْ وَهُمْ فِي غَفْلَةٍ مَّعْرِضُونَ ) {الأنبياء:1}

#2

السلام عليكم ورحمه الله وبركاته

اخي جرب الكود التالي


<select name="Select1">
<option>Choose a color ...</option>
<option style="background-color:red"></option>
<option style="background-color:green"></option>
<option style="background-color:blue"></option>
</select>

      
      

      
.:: Wish to become better and better ::.

    

  

    
    

      
#3
        
        

      
و عليكم السلام و رحمة الله و بركاته
هذا الكود لن يمكنك من جعل اللون المختار فى وضعية ال selected
حاولت بإستخدام ال JavaScript  ايضاً و لكن  لا يتم إختيار اللون حتى لو قمت بإستخدام صورة ك background image

      
تم تعديل هذه المشاركة بواسطة طارق إبراهيم في 5 مايو 2011 في 11:44

      

      
Technical Lead Developer
My LinkedIn Profile
اللهم قنى شر الجهل و الجهلاء
( اقْتَرَبَ لِلنَّاسِ حِسَابُهُمْ وَهُمْ فِي غَفْلَةٍ مَّعْرِضُونَ ) {الأنبياء:1}

    

  

    
    

      
#4
        
        

      
مثال
<html>
<head>
	<style>
		#Select1 {
			min-width: 40px
		}
	</style>

	<script type="text/javascript">
		var colors = ["red", "green", "blue", "black", "white"];
		var currentColorIndex = 0;

		function colorChanged(value) {
		//alert(value);
			currentColorIndex = value;
			document.getElementById('Select1').style.backgroundColor = colors[currentColorIndex];
		}

		function populateSelect() {
			var select = document.getElementById('Select1');
			var options = '';
			for (var i = 0; i < colors.length; i++) {
				options += '<option style="background:'+colors+'" '+
							(i == currentColorIndex?'selected':'')+' value="'+i+'"></option>';
			}
			select.innerHTML = options;
		}
	</script>
</head>
<body onload="populateSelect()">
	<select id="Select1" onchange="colorChanged(this.value)">

	</select>
</body>
</html>
أو يمكنك استعمال أحد ال color picker الخاصة ب jQuery ، مثلا http://www.eyecon.ro/colorpicker/

      
      

      
    

  

    
    

      
#5
        
        

      
تمام يا عصام جزاك الله خيراً

      
      

      
Technical Lead Developer
My LinkedIn Profile
اللهم قنى شر الجهل و الجهلاء
( اقْتَرَبَ لِلنَّاسِ حِسَابُهُمْ وَهُمْ فِي غَفْلَةٍ مَّعْرِضُونَ ) {الأنبياء:1}

    

  

    
    

      
#6
        
        

      
المشكلة التى كانت لدى عندما استخدمت الجافا سكربت كانت ان ال select tag  لا يقبل ال color code  ك hex valueعلماً بإن التجربة تتم على FF 3.6.17

      
تم تعديل هذه المشاركة بواسطة طارق إبراهيم في 5 مايو 2011 في 16:58

      

      
Technical Lead Developer
My LinkedIn Profile
اللهم قنى شر الجهل و الجهلاء
( اقْتَرَبَ لِلنَّاسِ حِسَابُهُمْ وَهُمْ فِي غَفْلَةٍ مَّعْرِضُونَ ) {الأنبياء:1}

    

  

    
    

      
#7
        
        

      
اقتباس
 المشكلة التى كانت لدى عندما استخدمت الجافا سكربت كانت ان ال select tag   لا يقبل ال color code  ك hex valueعلماً بإن التجربة تتم على FF 3.6.17 						 						  
لم أفهم مشكلتك تماماً، ولكن لما لاتجرب إحدى الإضافات الجاهزة لمكتبة jQuery والتي يأتي معها العديد من الأحداث events بشكل موثق وتريح رأسك؟

      
      

      
    

  

    
    
    
 مواضيع مشابهة