HTML: select menu as navigation menu - html

<select id="touchsplashmenu" onchange="window.open(this.value,'','');">
<option value="">Choose your page</option>
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
<option value="page3.html">Page 3</option>
</select>
Right now each page opens in a new window. How can I change this so that the page opens in the current browser window?


Replace:
onchange="window.open(this.value,'','');"
With:
onchange="window.open(this.value,'_self');"
Also if you are getting 404 page on "Choose your page"... Try setting it's value to value="#"
Update HTML:
<select id="touchsplashmenu" onchange="window.open(this.value,'_self');">
<option value="#">Choose your page</option>
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
<option value="page3.html">Page 3</option>
</select>


Does this work for you?
<select id="touchsplashmenu" onchange="location.href=this.value">
<option value="#">Choose your page</option>
<option value="www.google.com">Page 1</option>
<option value="www.facebook.com">Page 2</option>
<option value="www.google.com">Page 3</option>
</select>


Try
<select id="touchsplashmenu" onchange="window.open(this.value,'_self');">
See W3schools.com

Related

Select Menu - Select Property - HTML

Is There a way To set selected="selected" to selected="notselected" Or something like that. i tried selected="false" but it did not doing anything
Thank You For all your answers

You can do it easily with little bit jquery. Please have a look the demo jsfiddle
Demo
Markup:
<select multiple="multiple" name="remaintextarea" id="studentremain" size="10">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<button type='button' id='selectall'>Select All</button>
<button type='button' id='deselectall'>De-Select All</button>
JS:
$('#selectall').click(function() {
$('#studentremain > option').attr("selected", "selected");
});
$('#deselectall').click(function() {
$('#studentremain > option').removeAttr("selected");
});

Just don't specify selected for the options you don't want selected:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>

This may help
<select>
<option disabled selected> -- select an option -- </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

You use selected property in html then it will select the one you added selected on just like this
<option value="bike" selected></option>

how to show an item of html select tag when the page is loaded

I have a select element in my page that has different element. ie.
<select name="select_element">
<option value="item_1">Item 1</option>
<option value="item_2">Item 2</option>
<option value="item_3">Item 3</option>
</select>
I would to show the element Item 2 when the page is loaded instead the first element of the list. Does exist a way to accomplish that?

Try this :-
<select name="select_element">
<option value="item_1">Item 1</option>
<option value="item_2" selected>Item 2</option>
<option value="item_3">Item 3</option>
</select>

You need something called "selected" that will make that option the selected option when the page is loaded. All you do is this:
<option value="item_1">Item 1</option>
<option value="item_2" selected>Item 2</option>
Hope this helped!

How to add a title to a html select tag

How would I go about setting a title in select tag? Here is my select box:
<select>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
When I visit the site, by default it shows "Sydney". But I want to display a title, such as, "What is the name of your city?"

<select>
<option selected disabled>Choose one</option>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
Using selected and disabled will make "Choose one" be the default selected value, but also make it impossible for the user to actually select the item, like so:

<select>
<optgroup label = "Choose One">
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</optgroup>
</select>

You can combine it with selected and hidden
<select class="dropdown" style="width: 150px; height: 26px">
<option selected hidden>What is your name?</option>
<option value="michel">Michel</option>
<option value="thiago">Thiago</option>
<option value="Jonson">Jonson</option>
</select>
Your dropdown title will be selected and cannot chose by the user.

You can use the following
<select data-hai="whatup">
<option label="Select your city">Select your city</option>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>

I think that this would help:
<select name="select_1">
<optgroup label="First optgroup category">
<option selected="selected" value="0">Select element</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</optgroup>
<optgroup label="Second optgroup category">
<option value="5">Option 4</option>
<option value="6">Option 5</option>
<option value="7">Option 6</option>
</optgroup>
</select>

<option value="" selected style="display:none">Please select one item</option>
Using selected and using display: none; for hidden item in list.

You can add an option tag on top of the others with no value and a prompt like this:
<select>
<option value="">Choose One</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
Or leave it blank instead of saying Choose one if you want.

Typically, I would suggest that you use the <optgroup> option, as that gives some nice styling and indenting to the element.
The HTML element creates a grouping of options within a element. (Source: MDN Web Docs: <optgroup>.
But, since an <optgroup> cannot be a selected value, you can make an <option selected disabled> and then stylize it with CSS so that it behaves like an <optgroup>....
.optionGroup {
font-weight: bold;
font-style: italic;
}
<select>
<option class="optionGroup" selected disabled>Choose one</option>
<option value="sydney" class="optionChild"> Sydney</option>
<option value="melbourne" class="optionChild"> Melbourne</option>
<option value="cromwell" class="optionChild"> Cromwell</option>
<option value="queenstown" class="optionChild"> Queenstown</option>
</select>

With a default option having selected attribute
<select>
<option value="" selected>Choose your city</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>

The first option's text will always display as default title.
<select>
<option value ="">What is the name of your city?</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>

You can create dropdown title | label with selected, hidden and style for old or unsupported device.
<select name="city" >
<option selected hidden style="display:none">What is your city</option>
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
<option value="4">Queenstown</option>
</select>

I added a <div> and it worked fine
<div title="Your title here!">
<select>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
</div>

<select name="city">
<option value ="0">What is your city</option>
<option value ="1">Sydney</option>
<option value ="2">Melbourne</option>
<option value ="3">Cromwell</option>
<option value ="4">Queenstown</option>
</select>
You can use the unique id for the value instead

how to set a default prompt when nothing selected for "select" using css

Is it possible to set a default prompt when nothing is selected for select box using css? or is there an elegant way to deal with this other than
<option>Select Here</option>?

Try this:
<select>
<option value="" disabled>Select one--</option>
<option value="someVal1">Option 1</option>
<option value="someVal2">Option 2</option>
<option value="someVal3">Option 3</option>
<option value="someVal4">Option 4</option>
</select>

The accepted answer did not work for me as expected.
If you need the "Select one option" to be the selected one by default , this worked for me
<select id="selected_option" name="selected_option">
<option value="default" selected="selected">Select one option </option>
<option value="someVal1">Option 1</option>
<option value="someVal2">Option 2</option>
<option value="someVal3">Option 3</option>
<option value="someVal4">Option 4</option>
</select>
Is also important that the select has id and name so when you submit the form the value will be part of the POST or GET

<select>
<option style="display:none">Empty</option>
<option>button1</option>
<option>button2</option>
</select>

This is how I use for setup the default prompt but it will not set a default value. It use a HTML5 validation required. It may be a little bit shift from the question but I hope it could help as alternative.
<select id="car" name="car[brand]" required>
<option disabled selected>Select Car Brand</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Try using option with unset value
<select>
<option value>Select something</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>

html onClick condition Link

SO basically im trying to create a button on a html webpage that uses or checks the values from two drop down lists and relative to that it will link to the appropriate page.
But the IF statements dont seem to work...
i tried using regular href Links but this didnt end well, such as When to use onclick in HTML?
here is my code:
<select name="Module">
<option value="Module 10">Module 10</option>
<option value="Module 11">Module 11</option>
<option value="Module 20">Module 20</option>
<option value="Module 60">Module 60</option>
<option value="Module 70">Module 70</option>
<option value="Module 85">Module 85</option>
</select>
<select name="Sector">
<option value="Sector1">Sector1</option>
<option value="Sector2">Sector2</option>
<option value="Sector3">Sector3</option>
<option value="Sector4">Sector4</option>
</select>
<FORM>
<INPUT type="button" value="OK"
onClick="if (( Module=='Module 10') && (Sector=='Sector1)) {location.href='M10_S1.html'}">
</FORM>

This should be what you want:
<form>
<select name="Module">
<option value="1">Module 1</option>
<option value="2">Module 2</option>
<option value="3">Module 3</option>
<option value="4">Module 4</option>
<option value="5">Module 5</option>
<option value="6">Module 6</option>
</select>
<select name="Sector">
<option value="1">Sector1</option>
<option value="2">Sector2</option>
<option value="3">Sector3</option>
<option value="4">Sector4</option>
</select>
<input type="button" value="Confirm" onClick="location.href='./M' + Module.value + '_S' + Sector.value + '.htm'">
</form>
The file names will be formatted as "M#_S#.htm"