I am currently working on my first web application. Users need to fill a form, and one of the information is 'city', as a select type input. If the user chooses a city but one of the information is not valid, I would like the chosen city to stay there while the user fixes the invalid input.
For example, I did it for a date that the user needs to enter:
<input type=date name="endDate" value="<c:out value="${requete.endDate}"/>">
And it's working, but for a select type input I don't know how to do it..
<select name="city">
<option value="City" selected>City</option>
<option value="Ottawa">Ottawa</option>
<option value="Toronto">Toronto</option>
<option value="Montreal">Montreal</option>
</select>
The same sort of thing - let's say that the selected city is stored in request.city.
You would need to make sure that the selected option has the "selected" property in your JSP like so:
<select name="city">
<option value="City"
<c:if test="${empty request.city}">selected</c:if>>
City
</option>
<option value="Ottawa"
<c:if test="${request.city == 'Ottawa'}">selected</c:if>>
Ottawa
</option>
<option value="Toronto"
<c:if test="${request.city == 'Toronto'}">selected</c:if>>
Toronto
</option>
<option value="Montreal"
<c:if test="${request.city == 'Montreal'}">selected</c:if>>
Montreal
</option>
</select>
So, to sum up what this is doing - whatever is between a "c:if" element will only be output as HTML if the test evaluates to true. So all this test does is determine whether the selected city equals the value that option represents, and adds the "selected" property to that element if so.
Try with simple EL and selected attribute:
<select name="city">
<option value="City" selected>City</option>
<option value="Ottawa" ${'Ottawa' eq param.city ? 'selected' : ''}>Ottawa</option>
<option value="Toronto" ${'Toronto' eq param.city ? 'selected' : ''}>Toronto</option>
<option value="Montreal" ${'Montreal' eq param.city ? 'selected' : ''}>Montreal</option>
</select>
I am new to HTML and PHP and want to achieve a drop-down menu from the mysql table and hard-coded too. I have multiple select in my page, One of them is
<select name="tagging">
<option value="">Choose Tagging</option>
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
</select>
Problem is now that user can also select "Choose Tagging" as his tagging but i only want to provide him to chose from available three. I used disable as
<select name="tagging">
<option value="" disabled="disabled">Choose Tagging</option>
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
</select>
But now "Option A" became the default one. So i want to set "Choose Tagging" as by default and also want to disable it from selection. Is it a way to do this. Same thing need to be done with other select which will fetch data from Mysql. Any suggestion will be appreciable.
use
<option selected="true" disabled="disabled">Choose Tagging</option>
Use hidden.
<select>
<option hidden>Choose</option>
<option>Item 1</option>
<option>Item 2</option>
</select>
This doesn't unset it but you can however hide it in the options while it's displayed by default.
In HTML5, to select a disabled option:
<option selected disabled>Choose Tagging</option>
Electron + React.
Let your two first options look like this.
<option hidden="true">Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>
First to display when closed.
Second to display first when the list opens.
I know you ask how to disable the option, but I figure the end users visual outcome is the same with this solution, although it is probably marginally less resource demanding.
Use the optgroup tag, like so :
<select name="tagging">
<optgroup label="Choose Tagging">
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
</optgroup>
</select>
Another SELECT tag solution for those who want to keep first option blank.
<label>Unreal :</label>
<select name="unreal">
<option style="display:none"></option>
<option>Money</option>
<option>Country</option>
<option>God</option>
</select>
<select name="dept" id="dept">
<option value =''disabled selected>Select Department</option>
<option value="Computer">Computer</option>
<option value="electronics">Electronics</option>
<option value="aidt">AIDT</option>
<option value="civil">Civil</option>
</select>
use "SELECTED" which option you want to select by defult.
thanks
selected disabled="true"
Use this. It will work in new browsers
we can disable using this technique.
<select class="form-control" name="option_select">
<option selected="true" disabled="disabled">Select option </option>
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
</select>
If you are using jQuery to fill your select element, you can use this:
html
<select id="tagging"></select>
js
array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C']
$.each(array_of_options, function(i, item) {
if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; }
$('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging');
})
This will allow the user to see the first option as a disabled heading ('Choose Tagging'), and select all other options.
this should help....:)
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value=""selected="true" disabled="disabled"> Select</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
This will hide the option for you this easier that to make a other dropdown box
<option selected="true" disabled="disabled">Choose Tagging</option>
You can set which option is selected by default like this:
<option value="" selected>Choose Tagging</option>
I would suggest using javascript and JQuery to observe for click event and disable the first option after another has been selected:
First, give the element an ID like so:
<select id="option_select" name="tagging">
and the option an id :
<option value="" id="initial">Choose Tagging</option>
then:
<script type="text/javascript">
$('option_select').observe(click, handleClickFunction);
Then you just create the function:
function handleClickFunction () {
if ($('option_select').value !== "option_select")
{
$('initial').disabled=true; }
}
I've got a select option menu for example with 10 options. When I open the page I want it to be on the 5 element. Example
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3">Volga</option>
<option value="4">Lada</option>
<option value="5">Porsche</option>
</select>
When I open the page I see the first option Volvo,but I what to be for example BMW. If you are going to say to change their place, this is not the idea because I gave you a simple example. In my case the idea is other
I also forget to say that "selected" can't help because I read all of the values from database
<select name="categories" id="news_cat" selected="1">
<option value="0"></option>
{foreach from=$categories item=i}
<option value="{$i.id}"> {$i.name|stripslashes} </option>
{/foreach}
</select>
You need to apply selected or selected="selected" to your chosen element.
so with your example:
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3">Volga</option>
<option value="4" selected>Lada</option>
<option value="5">Porsche</option>
</select>
Add selected or selected='selected' to option
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3" selected>Volga</option>
<option value="4">Lada</option>
<option value="5">Porsche</option>
</select>
JavaScript solution: selectObj.options[2].selected=true;
http://jsfiddle.net/8dWzB/16/
No sure what server side technology you are using , but regardles of that, you can do what you like on the client side using JQuery. Try the following:-
1) Get the data from your database into a list of objects having the id and name of the each car. Something like the following:-
`var categorylist = [{"id":"1","name":"volvo"},{"id":"2","name":"Mercerdes"},{"id":"3","name":"BMW"},{"id":"4","name":"Kia"},{"id":"5","name":"Toyota"},{"id":"6","name":"Honda"},{"id":"7","name":"Seat"},{"id":"8","name":"Nissan"}];'
You can then get this list to the client-side using ajax post or get
2) Then you can iterate through the object like this
$.each(categorylist, function (index, car) {
if(car.id !='5') {
$("#news_cat").append('<option value="' + car.id + '">' + car.name + '</option>');
}else
{
$("#news_cat").append('<option selected=selected value="' + car.id + '">' + car.name + '</option>');
}
});
Have a look at this fiddle
So I have a select for the grade on each subject. It's predefined and hence I don't have to store grades as a table in the database. I have a list of qualifications and I using jstl for each like this: <c:forEach items="${qualificationdetails}" var="qd">.
For each item I am producing a select like this.
<select class="grade" title="Grade Obtained">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
Is it possible to set the selected option using my variable qd ? something like
<option value="${qd.grade}" selected="selecetd">${qd.grade}</option>
This will add a duplicate option to the select. I think it would a bit "clunky" to make an array with the grades and send it accross for generating the options. Any ideas ?
You could just let JSP render the selected attribute conditionally.
<select class="grade" title="Grade Obtained">
<option value="1" ${qd.grade == '1' ? 'selected' : ''}>1</option>
<option value="2" ${qd.grade == '2' ? 'selected' : ''}>2</option>
<option value="3" ${qd.grade == '3' ? 'selected' : ''}>3</option>
<option value="A" ${qd.grade == 'A' ? 'selected' : ''}>A</option>
<option value="B" ${qd.grade == 'B' ? 'selected' : ''}>B</option>
<option value="C" ${qd.grade == 'C' ? 'selected' : ''}>C</option>
<option value="D" ${qd.grade == 'D' ? 'selected' : ''}>D</option>
<option value="E" ${qd.grade == 'E' ? 'selected' : ''}>E</option>
</select>
Alternatively, you could just create a collection/array of grades and store it in the application scope so that it's available in EL so that you can loop over it using <c:forEach>. I'm not sure how that would be "clunky". You could use <c:set> to store them commaseparated and use fn:split() to split them for <c:forEach>.
<c:set var="grades" value="1,2,3,A,B,C,D,E" scope="application" />
<select class="grade" title="Grade Obtained">
<c:forEach items="${fn:split(grades, ',')}" var="grade">
<option value="${grade}" ${qd.grade == grade ? 'selected' : ''}>${grade}</option>
</c:forEach>
</select>
This way you end up with more DRY code.
I thought that adding a "value" attribute set on the <select> element below would cause the <option> containing my provided "value" to be selected by default:
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
However, this did not work as I had expected. How can I set which <option> element is selected by default?
Set selected="selected" for the option you want to be the default.
<option selected="selected">
3
</option>
In case you want to have a default text as a sort of placeholder/hint but not considered a valid value (something like "complete here", "select your nation" ecc.) you can do something like this:
<select>
<option value="" 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>
Complete example:
<select name="hall" id="hall">
<option>1</option>
<option>2</option>
<option selected>3</option>
<option>4</option>
<option>5</option>
</select>
I came across this question, but the accepted and highly upvoted answer didn't work for me. It turns out that if you are using React, then setting selected doesn't work.
Instead you have to set a value in the <select> tag directly as shown below:
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
Read more about why here on the React page.
You can do it like this:
<select name="hall" id="hall">
<option> 1 </option>
<option> 2 </option>
<option selected> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
Provide "selected" keyword inside the option tag, which you want to appear by default in your drop down list.
Or you can also provide attribute to the option tag i.e.
<option selected="selected">3</option>
if you want to use the values from a Form and keep it dynamic try this with php
<form action="../<SamePage>/" method="post">
<?php
$selected = $_POST['select'];
?>
<select name="select" size="1">
<option <?php if($selected == '1'){echo("selected");}?>>1</option>
<option <?php if($selected == '2'){echo("selected");}?>>2</option>
</select>
</form>
Best way in my opinion:
<select>
<option value="" selected="selected" hidden="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>
Why not disabled?
When you use disabled attribute together with <button type="reset">Reset</button> value is not reset to original placeholder. Instead browser choose first not disabled option which may cause user mistakes.
Default empty value
Every production form has validation, then empty value should not be a problem. This way we may have empty not required select.
XHTML syntax attributes
selected="selected" syntax is the only way to be compatible with both XHTML and HTML 5. It is correct XML syntax and some editors may be happy about this. It is more backward compatible. If XML compliance is important you should follow the full syntax.
I prefer this:
<select>
<option selected 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>
'Choose here' disappears after an option has been selected.
An improvement for nobita's answer. Also you can improve the visual view of the drop down list, by hiding the element 'Choose here'.
<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>
Another example; using JavaScript to set a selected option.
(You could use this example to for loop an array of values into a drop down component)
<select id="yourDropDownElementId"><select/>
// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);
The selected attribute is a boolean attribute.
When present, it specifies that an option should be pre-selected when the page loads.
The pre-selected option will be displayed first in the drop-down list.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
If you are in react you can use defaultValue as attribute instead of value in the select tag.
If you are using select with angular 1, then you need to use ng-init, otherwise, second option will not be selected since, ng-model overrides the defaul selected value
<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
<option value="name">Name</option>
<option selected="selected" value="stargazers_count">Stars</option>
<option value="language">Language</option>
</select>
I would just simply make the first select option value the default and just hide that value in the dropdown with HTML5's new "hidden" feature. Like this:
<select name="" id="">
<option hidden value="default">Select An Option</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
value attribute of tag is missing, so it doesn't show as u desired selected. By default first option show on dropdown page load, if value attribute is set on tag.... I got solved my problem this way
This example has been tested to work with multiple <select> elements on the page, and can also work with normal text elements. It has not been tested for setting the value to more than one selection when <select multiple="true">, however you can probably modify this sample to support that.
Add an attribute data-selected to each <select> element and set the value(s) to the value of the option you wish to have selected.
Use javascript's querySelectorAll() to select all elements that have the custom attribute you just added.
In the following example, when run, the first <select> should show option with the value user as selected, and the second <select> should show the option with the value admin as selected.
document.querySelectorAll('[data-selected]').forEach(e => {
e.value = e.dataset.selected
});
<select data-selected="user" class="form-control" name="role">
<option value="public">
Pubblica
</option>
<option value="user">
Utenti
</option>
<option value="admin">
Admin
</option>
</select>
<select data-selected="admin" class="form-control" name="role2">
<option value="public">
Pubblica
</option>
<option value="user">
Utenti
</option>
<option value="admin">
Admin
</option>
</select>
I used this php function to generate the options, and insert it into my HTML
<?php
# code to output a set of options for a numeric drop down list
# parameters: (start, end, step, format, default)
function numericoptions($start, $end, $step, $formatstring, $default)
{
$retstring = "";
for($i = $start; $i <= $end; $i = $i + $step)
{
$retstring = $retstring . '<OPTION ';
$retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
if($default == $i)
{
$retstring = $retstring . ' selected="selected"';
}
$retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
}
return $retstring;
}
?>
And then in my webpage code I use it as below;
<select id="endmin" name="endmin">
<?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>
If $endmin is created from a _POST variable every time the page is loaded (and this code is inside a form which posts) then the previously selected value is selected by default.
This code sets the default value for the HTML select element with PHP.
<select name="hall" id="hall">
<?php
$default = 3;
$nr = 1;
while($nr < 10){
if($nr == $default){
echo "<option selected=\"selected\">". $nr ."</option>";
}
else{
echo "<option>". $nr ."</option>";
}
$nr++;
}
?>
</select>
You can use:
<option value="someValue" selected>Some Value</option>
instead of,
<option value="someValue" selected = "selected">Some Value</option>
both are equally correct.
Set selected="selected" where is option value is 3
please see below example
<option selected="selected" value="3" >3</option>
I myself use it
<select selected=''>
<option value=''></option>
<option value='1'>ccc</option>
<option value='2'>xxx</option>
<option value='3'>zzz</option>
<option value='4'>aaa</option>
<option value='5'>qqq</option>
<option value='6'>wwww</option>
</select>
You just need to put attribute "selected" on a particular option instead direct to select element.
Here is snippet for same and multiple working example with different values.
Select Option 3 :-
<select name="hall" id="hall">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
<br/>
<br/>
<br/>
Select Option 5 :-
<select name="hall" id="hall">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected="selected">5</option>
</select>
<br/>
<br/>
<br/>
Select Option 2 :-
<select name="hall" id="hall">
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Default selected value is Option-4
<html:select property="status" value="OPTION_4" styleClass="form-control">
<html:option value="">Select</html:option>
<html:option value="OPTION_1" >Option-1</html:option>
<html:option value="OPTION_2" >Option-2</html:option>
<html:option value="OPTION_3" >Option-3</html:option>
<html:option value="OPTION_4" >Option-4</html:option>
<html:option value="OPTION_5" >Option-5</html:option>
</html:select>
You will need an "id" attribute in each option for this solution to work:
<script>
function select_option (id,value_selected) {
var select;
select = document.getElementById(id);
if (select == null) return 0;
var option;
option = select.options.namedItem(value_selected);
if (option == null) return 0;
option.selected = "selected";
return true;
}
</script>
<select name="hall" id="hall">
<option id="1">1</option>
<option id="2">2</option>
<option id="3">3</option>
<option id="4">4</option>
<option id="5">5</option>
</select>
<script>select_option ("hall","3");</script>
The function first tries to find the <select> with the id, then it will search for the value_selected in the <select> options and if it finds it, it will set the selected attribute returning true. False otherwise
The problem with <select> is, it's sometimes disconnected with the state of what's currently rendered and unless something has changed in the option list, no change value is returned. This can be a problem when trying to select the first option from a list. The following code can get the first-option the first-time selected, but onchange="changeFontSize(this)" by its self would not. There are methods described above using a dummy option to force a user to make a change value to pickup the actual first value, such as starting the list with an empty value. Note: onclick would call the function twice, the following code does not, but solves the first-time problem.
<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extraLarge">Extra large</option>
</select>
<script>
function changeFontSize(x){
body=document.getElementById('body');
if (x.value=="extraLarge") {
body.style.fontSize="25px";
} else {
body.style.fontSize=x.value;
}
}
</script>
I use Angular and i set the default option by
HTML Template
<select #selectConnection [(ngModel)]="selectedVal" class="form-control col-sm-6 " max-width="100px" title="Select"
data-size="10">
<option >test1</option>
<option >test2</option>
</select>
Script:
sselectedVal:any="test1";
You can try like this
<select name="hall" id="hall">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
To set the default using PHP and JavaScript:
State: <select id="State">
<option value="" selected disabled hidden></option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
.
.
<option value="West Bengal">West Bengal</option>
</select>
<?php
if(isset($_GET['State'])){
echo <<<heredoc
<script>
document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected = true;
</script>
heredoc;
}
?>
This is simple method to make default option selected.
Can be used for multiple selects on an HTML page.
The method:
Find every select
Read the id and value of that select
Make the option selected
Note:
Every select must have ID to avoid conflict
$(document).ready(function() {
// Loop for every select in page
$('select').each(function(index, id) {
// Get the value
var theValue = $(this).attr('value');
// Get the ID
var theID = $(this).attr('id');
// Make option selected
$('select#' + theID + ' option[value=' + theValue + ']').attr('selected', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="sport" name="sport" class="autoselect" value="golf">
<option value="basket">Basket Ball</option>
<option value="tennis">Tennis</option>
<option value="golf">Golf</option>
<option value="bowling">Bowling</option>
</select>
<hr>
<select id="tools" name="tools" class="autoselect" value="saw">
<option value="hammer">Hammer</option>
<option value="drill">Drill</option>
<option value="screwdriver">Screwdriver</option>
<option value="saw">Saw</option>
<option value="wrench">Wrench</option>
</select>
I was having some troubles with it because I need some way to choose the option dynamically accordingly to the value that I have in the database. The script bellow works like a charm to me:
<?php
//pick the value of database
$selected_sexo = $query['s_sexo'];
?>
<select name="s_sexo" id="s_sexo" required>
<option <?php if($selected_sexo == 'M'){echo("selected");}?> value="M">M</option>
<option <?php if($selected_sexo == 'F'){echo("selected");}?> value="F">F</option>
</select>