Programmatically choose item in select drop down - html

I have a drop down:
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
How would I select item 2 programmatically?


First get a handle on that select somehow:
var select = document.getElementsByTagName("SELECT")[0];
Then manipulate the selectedIndex property (I believe it's a zero-based index):
select.selectedIndex = 1;


If you're talking about pre-selecting an item, simply set the item as "selected" as follows:
<select>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>


If you're using plain HTML:
<option selected value="2">2</option>
If you're able to use jQuery, use the val() method:
<select id="foo"> //give it an id
$("#foo").val("2");


jQuery edition...
$('#your_select').val('2');


<select>
<option value="1">1</option>
<option value="2" selected>2</option>
</select>


The easiest solution is this:
<select>
<option value="1">1</option>
<option selected value="2">2</option>
</select>

Related

Saving and adding up integer values of multiple selections

I am attempting to have 10 drop down selections with 3 choices: 1,2, or 3, and save each selection as an integer, then add them all up and have them displayed. I'm not sure how to do this in HTML and would like some help.
This is an example of a selection I have attempted to use (from w3schools), but I don't see how to temporarily store the input as an integer and then use it later.
<!DOCTYPE html>
<html>
<body>
<h1>The optgroup element</h1>
<p>The optgroup tag is used to group related options in a drop-down list:</p>
<form action="/action_page.php">
<label for="number">Choose a number:</label>
<select name="numbers" id="numbers">
<optgroup label="Numbers">
<option value="three">3</option>
<option value="two">2</option>
<option value="one">1</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Any kind of help is appreciated.

Most of the html you posted is not necessary, all you really need is your selects. The form element is really only used for communicating information from a user to a server. As far as what your HTML should look like:
<body>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
To collect input from multiple selects, as you are describing would use javascript. The following code returns a list of html elements with the class of '.select'.
let selectArray = document.querySelectorAll('.select');
Next you would want to loop through and add them to a variable.
let number = 0;
for(let i = 0; i < selectArray.length; i++){
number += parseInt(selectArray[i].value);
}
There are a few ways to save variables, for your use I recommend using localStorage.

HTML - Set value for the Select dropdown

I have a select dropdown menu and I want the placeholder text to read 'Position'
<select id="playingPosition" value="Position">
<option value="goalkeeper">Goalkeeper</option>
<option value="defender">Defender</option>
<option value="midfielder">Midfielder</option>
<option value="striker">Striker</option>
</select>
When the page loads, 'Goalkeeper' will be displayed before any user input. I have tried to rename this to 'Position' using the value attribute.
http://jsfiddle.net/bHJM2/

You can do something like this:
<option value="" disabled selected>Select your option</option>
This becomes:
<select name="playingPosition" id="playingPosition" value="Position">
<option value="" disabled selected>Select your option</option>
<option value="goalkeeper">Goalkeeper</option>
<option value="defender">Defender</option>
<option value="midfielder">Midfielder</option>
<option value="striker">Striker</option>
</select>
Looks like:
And we're done.

Set the selected attribute on the option element you want to select like this:
<option value="defender" selected>Defender</option>

Second HTML option load by default

In an HTML select element, is it possible to have the second option selected by default?
<select class="styled" onchange="location = this.options[this.selectedIndex].value;">
<option value="9u.html">Team 9u</option>
<option value="10u.html">Team 10u</option>
<option value="11u.html">Team 11u</option>
<option value="12u.html">Team 12u</option>
<option value="13u.html">Team 13u</option>
<option value="14u.html">Team 14u</option>
<option value="15u.html">Team 15u</option>
<option value="16u.html">Team 16u</option>
</select>
I would like the value "10u" to be in the select box when I load the page.

Use the selected attribute. Is google down?
<option value="10u.html" selected>Team 10u</option>

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 select dropdown list

I want to have a drop down list using the select, option tag... but when it first appear I want it to have an information, such as "Please select a name" then the user clicks on the drop down list and selects from the available option... I tried to made the "Please select a name" as an option, but then the user will be able to select this... which is not what I want. Do I need to use javascript to have this feature or what do I need to do?
If there'a jquery way to do this, this would be much helpful

Try this:
<select>
<option value="" disabled="disabled" selected="selected">Please select a name</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
When the page loads, this option will be selected by default. However, as soon as the drop-down is clicked, the user won't be able to re-select this option.

<select>
<option value="" style="display:none">Choose one provider</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
This way the user cannot see this option, but it shows in the select box.

Have <option value="">- Please select a name -</option> as the first option and use JavaScript (and backend validation) to ensure the user has selected something other than an empty value.

This is an old post, but this worked for me
<select>
<option value="" disabled selected>Please select a name...</option>
<option>this</option>
<option>that</option>
</select>

<select name="test">
<option hidden="true">Please select a name</option>
<option value="Cash">Cash</option>
<option value="Draft">Demand Draft No.</option>
<option value="Cheque">Cheque No.</option>
</select>

Maybe this can help you resolve without JavaScript
http://htmlhelp.com/reference/html40/forms/option.html
See DISABLE option

Simple, I suppose. The onclick attribute works nicely...
<select onchange="if(this.value == '') this.selectedIndex = 1; ">
<option value="">Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
After a different option is selected, if the first option is selected, Option 1 will be selected. If you want an explanation on the javascript, just ask.

<select>
<option value="" disabled="disabled" selected="selected">Please select name</option>
<option value="Tom">Tom</option>
<option value="Marry">Marry</option>
<option value="Jane">Jane</option>
<option value="Harry">Harry</option>
</select>

If you want to achieve the same for the jquery-ui selectmenu control then you have to set 'display: none' in the open event handler and add '-menu' to the id string.
<select id="myid">
<option value="" disabled="disabled" selected="selected">Please select name</option>
<option value="Tom">Tom</option>
<option value="Marry">Mary</option>
<option value="Jane">Jane</option>
<option value="Harry">Harry</option>
</select>
$('select#listsTypeSelect').selectmenu({
change: function( event, data ) {
alert($(this).val());
},
open: function( event, ui ) {
$('ul#myid-menu li:first-child').css('display', 'none');
}
});

I'm sorry to necro an old post - but I found a better way of doing this
What I believe this poster wanted was :
<label for="mydropdown" datalabel="mydropdown">Country:</label>
<select name="mydropdown">
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="Other">Not Listed</option>
</select>
I found this information in another post while searching for this same answer - Thanks

<select>
<option value="" disabled selected hidden>Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>

Make a JavaScript control that before the submit cheek that the selected option is different to your first option

This is how I do this with JQuery...
using the jquery-watermark plugin (http://code.google.com/p/jquery-watermark/)
$('#inputId').watermark('Please select a name');
works like a charm!!
There is some good documentation at that google code site.
Hope this helps!

<select>
<option value="" disabled="disabled" selected="selected">Please select a
developer position</option>
<option value="1">Beginner</option>
<option value="2">Expert</option>
</select>

From what I understand, you are looking for a placeholder for your select options, which has to be selected when no value is pre-selected, and cannot be selected by user, or seen.
<select name="selectOne">
<option value="" disabled selected hidden>Choose an option</option>
<option value="this">This</option>
<option value="that">That</option>
</select>