I want to ask about html dropdown menu. As we know, that option tag in html only support text. However, I need to create a drowp down menu that show list of image. I've searched for it. And I found several ways, including using css or jquery. However, that's not what I want. Here is, what I want to create:
<option value = blablabla><img src = "img/blbalba.txt"></option>
The code above is not working. Is there any sugestion to display dropdown menu like that?
Thank you for your help.
As You can't do that in plain HTML, but you can do it with JQuery.
Right now You can do like this
<select>
<option value="img1" style="background-image:url(images/img1.png);">image 1</option>
<option value="img2" style="background-image:url(images/img2.png);">image 2</option>
<option value="img3" style="background-image:url(images/img3.png);">image 3</option>
<option value="img4" style="background-image:url(images/img4.png);">image 4 </option>
</select>
Browsers will only render text inside a select tag, so, if you wan to use a selector that shows images instead of text, you cannot use a select you'll need to build your own selectable object.
That could be quite difficult to do. You can use different premade solutions that people on your situation developed before or try to reinvent the wheel.
Check this :)
A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
What is so cool about this plugin!
Adds images and description to otherwise boring drop downs.
Allows JSON to populate the drop down options.
Converts your HTML select element to ddSlick.
Uses Minimum css and no external stylesheets to download.
Supports callback functions on selection.
Works as good even without images or description!
http://designwithpc.com/Plugins/ddSlick#demo
Related
I want to create a select that looks like a collection in Materialize CSS.
I know that in order to do something like that on plain HTML I need to use the size attribute.
<select id="someSelect" size="8">
<option value="3">Blabla</option>
<option value="4">Bla</option>
...
</select>
Howhever, when I add it, it doesn't change anything, and the select is still a dropdown and not a list.
How could I create a selectable list (only one selection at a time) in Materialize CSS?
EDIT:
bahman parsamanesh mentioned in his comment the usage of <div class="collection"> and <a> inside it, which is exactly I was looking for, but how could I handle it's onChange?
Ok, so I've been researching for some time now, without any luck, a way to to access different areas of a single page from a list of links in a dropdown sub-menu that currently contains five (5) working links that go to different pages.
What I'd like to do is keep the separate links for each piece of content, but combine the information from these pages to a single page and then link those specific areas from the existing dropdown menu / sub-menu links.
Can this be done? I understand about anchor tags and have tried to see how I can use them here but it doesn't appear to be an option since I'm not trying to link from within a page, rather from sub-menus in a dropdown menu?
Any thoughts or ideas would be greatly appreciated, if this is in fact possible! Thanks...
BTW: not sure if it's going to make a difference, but this site is in WordPress.
Use jquery and following code
HTML:
<select id="_selectPlatform" name="_selectPlatform" onChange=selectPlatformChange();>
<option value="default">Select</option>
<option value="Android">Android</option>
<option value="Blackberry">BlackBerry</option>
<option value="IOS">IOS</option>
<option value="Others">Others</option>
</select>
and script code
function selectPlatformChange() {
var _selectPlatform = $('#_selectPlatform').val();
if (_selectPlatform == 'Android') {
window.location.href = 'androidpage.html';
}
}
it will work
How can I put image next to the text in the select menu.
For example this is not working:
<select style="background-color:black; width:150px;color:white;">
<option style="background-image:url(images/english.png);">English</option>
</select>
This is not working. I want to have a little flag first and then name of the language.
The select element does not support that type of thing. It's meant to be a native control that's consistent wherever it's used. You can, however, whip up your own custom drop-down style menu.
Here's one I did (under the graph).Also, here's a jquery plugin that might make it easier for you.
Good luck!
I have a select menu like this:
<select name="mySelect">
<option value="250" selected="selected">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
It comes out looking different depending on OS and I would like it to have a different background. The problem is when I use a standard css background the arrow on the right of the select element remains visible.
select {
background: url(../images/bg_select.png);
}
I would also like to have different background colours when the select list has been opened. The default is often blue and white.
Edit: Looks like I'll have to use javascript. Are there any jQuery plugins to do this?
You may want to look at this: Cut & Paste DHTML Select menu. It uses Javascript to replace the select menu with custom HTML.
all a listener to the select and use jquery to trigger the class
add/remove classes should work fine
I have a multiple selection SELECT field which I don't want the end user to be able to change the value of.
For UI reasons, I would like to be able to do this without using the disabled="true" attribute. I've tried using onmousedown, onfocus, onclick and setting each to blur or return false but with no success.
Can this be done or am I trying to do the impossible?
I know you mentioned that you don't want to, but I actually think that using the disabled attribute is a better solution:
<select multiple="multiple">
<option value="volvo" selected="true" disabled="disabled">Volvo</option>
<option value="saab" disabled="disabled">Saab</option>
<option value="opel" disabled="disabled">Opel</option>
<option value="audi" disabled="disabled">Audi</option>
</select>
If necessary, you can always give the select a class and style it with CSS. This solution will work in all browsers regardless of scripting capabilities.
Could you do it with an onchange event?
<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">
Your best bet would be to swap out the options within the select box. If you only have one answer in that box, it doesn't matter if it is clickable.
I would, however, try to find another way of doing this as it seems like it would cause frustration for a user. Imagine this user scenario:
"Look, a select box of options."
click
"Hrm, why didn't that work?"
click
click!
"This stupid thing is broken, I'm never coming back here."
If you swap out the select for HTML text, it accomplishes the same goal. This is a fairly simple task for most of the major Javascript frameworks.
#Jack & #17 of 26, good point but the end user will be expecting the select box to be disabled so that confusion shouldn't be an issue.
I should have been clearer about why I couldn't just disable the control.
The application that will be using this will need to disable the selection of the options and there is a requirement that the "locked" control still maintain the look and feel of normal form controls.
Try this trigger.
<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>
There is a recent new addition to CSS3 that is 95% compatible with all current browsers except Opera Mini, called pointer-events. Put simply, you can "disable" the default action on a SELECT or any other element, and still be able to perform specific events on it...
You can view Chris Coyier's article on them at enter link description here.
Is this closer to what you're looking for... Sorry that I couldn't provide any of my own coding examples...