I have an HTML select form with several options in it. I want a default option of "(select an issue)", but I don't want that option to be submittable. I want the "Please fill out this field" message to show up if the user tries to submit with this option selected.
I've seen this many times on other sites, so I know it's possible, some way or another, but I'm not sure how to approach it.
This link: How do I make a placeholder for a 'select' box?, provided by Jasper Kent, helped me figure it out.
There was a solution to do the following:
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
This forces the option to have to be switched before submission, and the user cannot re-select that option either. It also makes it the default selection.
I'm using a combobox (select) to display countries. I doing this using Bootstrap.
This is the code
<select class="form-control form-control-user" id="inputCountry" name="country" placeholder="Country">
<option value="NL">Netherlands</option>
<option value="BE">Belgium</option>
<option value="LX">Luxembourg</option>
<option value="GR">Greece</option>
<option value="NO">Norway</option>
</select>
When I go to my browser, my combobox is empty. When I click it I can see the entries. When I select an entry, nothing shows in the combobox. When I try to echo the value of the combobox, I get the value, so it's a visual issue.
removing 1 of the classes (form-control or form-control-use) will fix this, but the design I want gets lost.
Is there any way to fix this?
I have tried your code block and it was working without a problem.
This is the JSFiddle link which I have done some modificatoins:
https://jsfiddle.net/mw5904uf/
Here, I have created form-control-user css class. I am not sure that this is what you want. Anyhow make sure you have linked css and js files correctly as Charlene said.
In addition, since your placeholder didn't work, I have modified that by adding another option.
I have a simple form with some select options that need to do stuff when the options are changed (create new form elements). This all works fine, however when a select option is chosen and the user clicks elsewhere on the page (either another form option or a blank area of the page) the text of the chosen option remains highlighted blue.
I've used select's before and not had this problem, however they weren't linked to the .change function. Is that something to do with why this is happening? Has anybody encountered this issue before? All help greaty appreciated! Code is below...
<div id="container1" class="form-group">
<label class="control-label">Select an option</label>
<div>
<select class="form-control" id="mySelect">
<optgroup label="A">
<option value="1A">Option1A</option>
<option value="2A">Option2A</option>
<option value="3A">Option3A</option>
<option value="4A">Option4A</option>
</optgroup>
<optgroup label="B">
<option value="1B">Option1B</option>
<option value="2B">Option2B</option>
<option value="3B">Option3B</option>
<option value="4B">Option4B</option>
</optgroup>
</select>
</div>
</div>
I've seen the issue brought up here
Remove Blue highlighting of option
However I don't think this quite describes my problem, as it seems to me that that person wants to remove the blue highlighting whilst using the form (hard to be 100% sure though). I don't mind the blue highlighting being there when using the form, I just want it to stop persisting when you stop using the form and do something else on the page.
UPDATE: Problem only seems to occur in Internet Explorer (tested versions 9, 10 and 11). Tested in Chrome and issue doesn't occur. Just to elaborate on the comments, the issue has nothing to do with JS (so I have removed the JQuery code and subsequent tags). The issue occurs when using optgroups in a select form. Loading the HTML outlined above into IE produces the error.
I have been looking around for a couple days now and haven't found the answer. I did see this: jQuery - Copy / move text from select list to textarea which I already did, but then the problem is what if the after copying the selected drop down item to go into the text area you change your mind and want to send it back or get rid of it?
I'm not sure if it's best to use two tags or if I should use textareas. This is what I have for the field on the left:
<select size="10" name="options" variable="#available options" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
And then when options are selected and the button is clicked they are added to a list and my textarea on the right reflects that list. Should I also make the area on the right a selectable drop down similar to the one with all my options? If I do that, then how to I get it to reflect only the options I have clicked?
Sorry if this doesn't make sense. It's my first time posting here and I'm not a programmer (but learning). Thanks in advance!
I have the following HTML code:
<select name="forma">
<option value="Home">Home</option>
<option value="Contact">Contact</option>
<option value="Sitemap">Sitemap</option>
</select>
How can I make Home, Contact and Sitemap values as links?
I used the following code and as I expected it didn't work:
<select name="forma">
<option value="Home">Home</option>
<option value="Contact">Contact</option>
<option value="Sitemap">Sitemap</option>
</select>
UPDATE 2022: This answer is fine but really in 2022 we shouldn't be doing this anymore!
UPDATE (May 2020): Someone asked in the comments why I wouldn't advocate this solution. I guess it's a question of semantics. I'd rather my users navigate using <a> and kept <select> for making form selections because HTML elements have semantic meeting and they have a purpose, anchors take you places, <select> are for picking things from lists.
Consider, if you are viewing a page with a non-traditional browser (a non graphical browser or screen reader or the page is accessed programmatically, or JavaScript is disabled) what then is the "meaning" or the "intent" of this <select> you have used for navigation? It is saying "please pick a page name" and not a lot else, certainly nothing about navigating. The easy response to this is well i know that my users will be using IE or whatever so shrug but this kinda misses the point of semantic importance.
Whereas a funky drop-down UI element made of suitable layout elements (and some js) containing some regular anchors still retains it intent even if the layout element is lost, "these are a bunch of links, select one and we will navigate there".
Here is an article on the misuse and abuse of <select>.
ORIGINAL ANSWER
<select name="forma" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
UPDATE (Nov 2015): In this day and age if you want to have a drop menu there are plenty of arguably better ways to implement one. This answer is a direct answer to a direct question, but I don't advocate this method for public facing web sites.
You cant use href tags within option tags. You will need javascript to do so.
<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>
<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".php";
}
</script>
Use a real dropdown menu instead: a list (ul, li) and links. Never misuse form elements as links.
Readers with screen readers usually scan through a automagically generated list of links – the’ll miss these important information. Many keyboard navigation systems (e.g. JAWS, Opera) offer different keyboard shortcuts for links and form elements.
If you still cannot drop the idea of a select don’t use the onchange handler at least. This is a real pain for keyboard users, it makes your third item nearly inaccessible.
The accepted solution looks good, but there is one case it cannot handle:
The "onchange" event will not be triggered when the same option is reselected. So, I came up with the following improvement:
HTML
<select id="sampleSelect" >
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
jQuery
$("select").click(function() {
var open = $(this).data("isopen");
if(open) {
window.location.href = $(this).val()
}
//set isopen to opposite so next time when use clicked select box
//it wont trigger this event
$(this).data("isopen", !open);
});
(I don't have enough reputation to comment on toscho's answer.)
I have no experience with screen readers and I'm sure your points are valid.
However as far as using a keyboard to manipulate selects, it is trivial to select any option by using the keyboard:
TAB to the control
SPACE to open the select list
UP or DOWN arrows to scroll to the desired list item
ENTER to select the desired item
Only on ENTER does the onchange or (JQuery .change()) event fire.
While I personally would not use a form control for simple menus, there are many web applications that use form controls to change the presentation of the page (eg., sort order.) These can be implemented either by AJAX to load new content into the page, or, in older implementations, by triggering new page loads, which is essentially a page link.
IMHO these are valid uses of a form control.
The <select> tag creates a dropdown list. You can't put html links inside a dropdown.
However, there are JavaScript libraries that provide similar functionality. Here is one example: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
<select name="career" id="career" onchange="location = this.value;">
<option value="resume" selected> All Applications </option>
<option value="resume&j=14">Seo Expert</option>
<option value="resume&j=21">Project Manager</option>
<option value="resume&j=33">Php Developer</option>
</select>
I'm sure someone can make a better answer than this with Jquery where the change in the dropdown will lead to a new page (good for navigation control on a navbar).
<td><select name="forma" id='SelectOption'>
<option value="Home">Home</option>
<option value="Contact">Contact</option>
<option value="Sitemap">Sitemap</option>
</select></td><td>
document.getElementById('SelectOption').addEventListener('change', function() {
val = $( "#SelectOption" ).val();
console.log(val)
if(val === 'Home') {
window.open('home.php','_blank');
}
if(val === 'Contact') {
window.open('contact.php', '_blank');
}
if (val === 'Sitemap') {
window.open('sitemap.php', '_blank');
}
});