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>
Related
<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 want to have a <select> element that's default chosen option is "____". In other word's, blank.
When the drop-down is focused, I want the "____" option to not be in the options that can be selected. That way the user has to choose something other than "____" as their option.
Does that make sense?
Illustrations
Closed:
Opened:
As you can see, the option "___" is not in the list when it is being selected. That is my desired end result.
I've tried using onFocus events to remove options, but that just unfocuses the element, and replaces the default option with another one.
You can leverage the hidden attribute in HTML. Try with this example
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Check this fiddle or the screenshots below.
Before clicking:
After clicking:
To hide the default option, allowing the others to show, there are a few ways to go.
Unfortunately, you can't hide option elements in all browsers. Again, display:none; does not work in all browsers on options ...
In the past when I have needed to do this, I have set their disabled attribute, like so...
$('option').prop('disabled', true);
I've then used the hiding where it is supported in browsers using this piece of CSS...
select option[disabled] {
display: none;
}
CSS is your friend, set display:none for the option you want to hide.
<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>
Here's an extra with jQuery that will ensure the first option of any select is invisible:
$('select:first-child').css({display:none;});
There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.
You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').
DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...
If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));
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.
I'm new to HTML5 and I'm trying to test the <select> with the attribute multiple in forms on Google Chrome. I encounter two problems.
Firstly, the options list changes in an ugly rectangle
Whereas before it was "normal":
My second problem is that, it seems that when i want to get the values of the select (by clicking on the button and in the code using javascript), only one is given...
Here is my code:
<!DOCTYPE html>
<html>
<body>
How do you travel?
<form method="get" id=myForm" onsubmit="done();">
<select name="transport" multiple> <optgroup label="Ecological">
<option value="Feet" selected>By Foot</option>
<option value="Bike">By Bike</option> </optgroup>
<optgroup label="Non-ecological">
<option value="public transports">With public transports</option> <option value="motorbike">By motorbike</option> <option value="car">By car</option>
</optgroup> </select>
<button onclick="bdone();">button</button>
<script>
function bdone(){
var mesOptions=document.getElementsByTagName('select')[0];
alert(mesOptions.value);
}
</script>
</body>
</html>
Thank you for reading me!
The Styling Issue
Just a note: the multiple attribute of the select element is not specifically HTML5.
The styling is going to depend on the CSS styles that are being applied, both the user agent styles (the default browser styles), and the specific CSS on that page. Try putting it in a page by itself (or in a jsFiddle and see if you get the same styling.
The selection issue
The selectedOptions property of the select element you get will contain an array of HTMLOptionElements, all of which have the value property. See below:
jsFiddle
function bdone(){
var selectElem = document.getElementsByTagName('select')[0]
var mesOptions = selectElem.selectedOptions;
for(var a=0;a<mesOptions.length;a++) {
alert(mesOptions[a].value);
}
}