Дизайн на тагът <select>

[mitko666]

Здравейте какви са начинити за смяна на дизайна на тага селект,главното което искам да направя е до всеки <option> таг да имам някаква картинка.

 

[firestarteR1]

преди няколко месеца си играх и точно картинка като фон с style="" в <option> тага не успях май да вкарам ...
(поне в моя случай не беше задоволителен резултата... гадая от спомени )

Сещам се че само на силектирания елемен успявах да го направя а на <option> можеш да задаваш различни цветове само да създаваш групи и повече инфо : http://www.w3schools.com/tags/tag_select.asp

 

[F1r3Fl3x]

Това може да ти свърши работа: http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/Select2DropDown.html

 

[mitko666]

Всъщност намерих още един начин който уж нагласих но понеже имам няколко селект тага на страницата и ако избера нещо на този който съм му сменил дизайна го избира и на всички останали ето кода.

    <a href="#" class="select">Нормален</a>
    <ul class="select_list" id="timeframe_select">
	<li id="time-48-Hours">Нормален</li>
	<li id="time-1-Week">Специален</li>
    </ul>
    <select id="purchaseTimeframe" name="mode" class="hidden"><option></option></select>

	  	  $(document).ready(function(){
		  // False Select Functionality
		  $(document).bind('click', function(e) {
				var $clicked = $(e.target);
				if (! $clicked.parents().hasClass("activedropdown"))
					$(".activedropdown").hide();
			});/*This function above checks each click on a page. If click occurred on elements
				outside the dropdown it hides the active select dropdown. Now this works like regular Select element. */

		  // On click show next ul
		  $(".select").click( function () { 
			  $(this).next("ul").addClass('activedropdown').toggle(); //Toggle is used because if you click the dropdown twice the list should dissapear
				return false;
			});
		  // The replacement of the a tag text with with the relevant selected text, Also higlighting of the selected/hovered list item 
		  $(".select_list li").click( function () { // Click event on one of the list items
		  $(this).siblings().removeClass("selected"); // First remove the selected class from previous selection
		  $(this).addClass("selected").parent().prev(".select").text($(this).text()); // Add selected class and to chosen list element and populate the a tag with text
		  $(this).parent().next("select").find("option").val($(this).text()); // Add selected li text value to the hidden select element's option value and whullah!
		  $(this).parent(".activedropdown").hide(); // Hide ul
		});                                  

		  $(".select_list li").hover( // Add and remove highlight to list item with mouse pointer hover
		  function () {
			$(this).addClass("hover"); // Adds hover class
		  }, 
		  function () {
			$(this).removeClass("hover"); // Removes hover class
		  });
		  // End False Select JS
		  
	  });

Мисля че това проклятие става заради js кода и по точно заради този ред

$(this).parent().next("select").find("option").val($(this).text());

Как да стане така че този js код да работи само за този селект таг

<select id="purchaseTimeframe" name="mode" class="hidden"><option></option></select>

 

[mitko666]

Помагайте моля ви.

 

[firestarteR1]

$(this).parent().next("select").find("option").val($(this).text());
пробвай с
$(this).parent().next("select .hidden").find("option").val($(this).text());