I would like this dropdown select to show an image with an alt text in front of the options, how can I do this?
<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option value="#">Select one</option>
<option value="#"></option>
<option value="http://www.url1.com">www.url1.com</option>
<option value="http://www.url2.com">www.url2.com</option>
<option value="www.url3.com">www.url3.com</option>
</select>
</form>
Thanks a lot!
It is not possible to show images in an html <select> - you would have to use a custom solution like this one: http://ivaynberg.github.io/select2/
That is not a button!, it a select dropdown.
You should use ddSlick which is a free light weight jQuery plugin that allows you to create a custom drop down with images and description.
I hope this helps
DOM model doesn't allow img elements inside option elements, so you cannot put image into a select. Please have a look at an HTML language reference. But you can use JavaScript or jQuery to put an image at the left or right of the menu whenever a new option is selected.
However, in Firefox you can just add background image to option:
<select>
<option style="background-image:url(image1.png);">OPTION1</option>
<option style="background-image:url(image2.png);">OPTION2</option>
<option style="background-image:url(image3.png);">OPTION3</option>
</select>
And in other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI Selectable.
olsn's link is also a good example.
Related
How do I highlight the option based on the page the user is currently on?
E.g. If on Beds page, Beds option is selected.
This is inside of a wordpress sidebar text widget so it is not coded separately on each page. I guess maybe javascript would be needed to detect what page it's on?
<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="#">Select a Category</option>
<option value="https://www.furnishare.it/shop/">Shop All</option>
<option value="/product-category/beds/">Beds</option>
<option value="/product-category/chairs/">Chairs</option>
<option value="/product-category/decor/">Decor</option>
<option value="/product-category/dressers/">Dressers</option>
<option value="/product-category/sofas/">Sofas</option>
<option value="/product-category/storage/">Storage</option>
<option value="/product-category/tables/">Tables</option>
</select>
</form>
Thank you!
You would want to get the url pathname:
window.location.pathname
I would suggest that you do this in a JS file rather than inline HTML. The implementation (jsfiddle wasn't saving for some reason):
http://codepen.io/anon/pen/VvEeMY
Make sure to un-comment the commented location line to get it working on your webpage:
var location = window.location.pathname;
Note that I would highly recommend not dealing with DOM events using attributes like onClick ... but to answer your question I've written the pure JS code above.
Edit: Using location.pathname requires you to use full paths starting after your domain but since your implementation was already doing so in select > option values I've taken the liberty to simplify it with location.pathname.
<select id="organiser" name="organiser" onclick="dropDownOrganiser(this)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="ca" >California</option>
<option value="co" >Colorado</option>
<option value="cn" >Connecticut </option>\
</select>
#organiser option{
height:70px;
padding:25px 0;
}
#organiser{
height:50px;
}
I am trying to change the height of options in select but it remains the same.I even tried padding but it didnt work.I need help regarding this.Otherwise suggest me some website for best drop down list designs?
You cannot add CSS for option of select box. But can using custom one like jquery plugin, or just custom html and css
Btw you can make the text bigger so that the select box will be bigger too.
It is impossible to style dropdown options that works in most current popular browsers. The best way to do this is to create custom dropdown list with html, css and javascript.
You can find the tutorial as well as demo there: http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
I find this tutorial is easy to understand and you can make your own dropdown list by reading this.
At last i found the best plugin for drop down lists.Bootstrap by silvio mortiro is user friendly and has keyboard navigations all well. Check http://silviomoreto.github.io/bootstrap-select/
I have a select with some values in it. each value loads a different webpage.
I want the default value that always shows to be "Select page".
How can I highlight the option for the current page when the user clicks on the dropdown?
By highlight i mean either have it selected or change its background colour or something.
HTML:
<select id="siteId" name="siteId" onchange=".....">
<option value="">Select a page</option>
<option row="1" value="68067">MAIN SITE</option>
<option row="2" value="88616">A</option>
<option row="3" value="88617">B</option>
</select>
EDIT: this select is created dynamically. I can only edit it with java-script after the page renders
If you are looking for jQuery solution then :eq() and attribute selector will be your best bet to look for. I have done something: http://jsbin.com/ojexuh/1/edit
first with :eq()
$('select option:eq(2)').css({"background":"green", "color":"white"});
and attribute selector like this one:
$('select option[row="1"]').css({"background":"red", "color":"yellow"});
option does support background colors within a select. I just set up a simple class to highlight it, as seen via here.
You can add a class like this
$('current page selector').addClass('current');
You could also just manually set it with the css function
$('current page selector').css('background-color', 'red');
You don't really have enough information for me to help you determine how to find the current page. I recommend having some way to tell from the value of the option that you can compare to the current window.location.
There's a lot of variability in browser+OS support for this. Taking Chrome as an example, the dropdown doesn't appear to accept any styling on OS X, but on Windows, background colors can be assigned both in a stylesheet and inline style attribute:
<style type='text/css'>
.highlighted {
background-color: yellow;
}
</style>
<select name='whatever'>
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3' style='background-color: green;'>three</option>
<option value='4' class='highlighted'>four</option>
</select>
Again, both methods work on windows, neither on OS X.
If you want a solution that works everywhere, you need to build your own dropdown control.
Set selected="selected" for the option you want to be the default.
<option row="3" value="88617" selected="selected">B</option>
For example, if I have this HTML for a drop down menu:
<div data-role="fieldcontain">
<label for="cars" class="ui-hidden-accessible">Select Seating Area</label>
<select id="cars" data-native-menu="false">
<option class="myclass1" value="volvo">Volvo</option>
<option class="myclass2" value="saab">Saab</option>
<option class="myclass3" value="mercedes">Mercedes</option>
<option class="myclass4" value="audi">Audi</option>
</select>
</div>
I want my custom classes to be added to the corresponding LI elements of the resulting UL element. How would one go about doing it? Does jQuery Mobile provide this functionality out of the box?
Here's a quick JSFiddle: http://jsfiddle.net/avQC6/1/
No this functionality is not provided out of the box. The way to do this would be something like the following:
$('[data-option-index=0]').addClass('myclass1');
$('[data-option-index=2]').addClass('myclass2');
I'm sure you could write a neater way to accomplish this. That is just the general idea.
The approach I ended up taking was the following:
Disable JQM select menu handling by adding "data-role='none'" attribute to the menu
Manually call .selectmenu() on the drop down list with a call back for "create" event
See this jsfiddle for an example
I am using boxover.js tool tip:
http://www.koders.com/javascript/fid8780CBE6D1BEE164FC239AA55DCB13A53B3536E8.aspx?s=document#L6
The tool tip works well with all the elements except SELECT box in IE.
I have a code where i need to show some image as a tool tip on selecting the option in a select box.
Ex:
<select name="categoryName" id="categoryName" style="width:50%;" size="10" >
<option value="">--Select Category--</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon1.png'></p>]" value="1">category1</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon2.png'></p>]" value="2">category2</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon3.png'></p>]" value="3">category3</option>
</select>
Pls help me in fixing this issue. Thanks in advance.
IE6 does not [IE7 onwards it does] support title property for OPTION tag. You can have same title for all OPTIONs by setting title attribute in SELECT tag.
Another option is to have DHTML popup as tooltip.