i see there is a disabled property on a specific item in the dropdown list but is there an enabled property on the whole html dropdown itself?
any suggestions?
According to the HTML 4 spec a select element has a disabled attribute.
So
<select disabled>
<option>Something</option>
</select>
should work
disabled="disabled"
This will disable a value within the combo box (it will still show up, but it will not have the ability to be selected):
<select>
<option disabled="disabled" value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This will disable the whole combo box:
<select disabled="disabled">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
may this will help
is same as :
<html>
<head>
<script type="text/javascript">
function makeDisable(){
var x=document.getElementById("mySelect")
x.disabled=true
}
function makeEnable(){
var x=document.getElementById("mySelect")
x.disabled=false
}</script></head><body><form>
<select id="mySelect"><option>Apple</option><option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="makeDisable()" value="Disable list">
<input type="button" onclick="makeEnable()" value="Enable list">
</form>
</body>
</html>
Related
The "required" validation is working for form
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
but is not working for the same form if I move the option with empty value down the list.
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
</body>
</html>
Why?
How exactly does the select element validation work?
Referred to the following: https://www.w3schools.com/tags/att_select_required.asp
The following is from w3 docs:
The required attribute is a boolean attribute. When specified, the
user will be required to select a value before submitting the form.
...
if the value of the first option element in the select element's
list of options (if any) is the empty string
...
Which means that the required attribute works only if the value of the first element is empty
It's not an issue with Select2 but with the way browser work with select tag. By default, the first option is selected by the browser.
So, in the first case "None" option is selected and hence your validation catch the error because the first option value is null.
In the second, case the first option is not null. Hence there is no validation error in this case.
To correct it, add an empty option with an empty value and set the attribute as selected disabled
Demo: https://jsfiddle.net/rLmztr2d/2909/
HTML:
<form>
<select required id="example">
<option disabled selected></option>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
JS:
$('#example').select2();
<form action="/xyz.jsp">
<select required>
<option selected disabled hidden>Select one of your active items...</option>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
The issue here is, when I specify require it does not act properly because the first field is selected.. it ends up producing NULL instead of actually requiring user to enter a choice...
Anything I can do to fix this?
It is because you have to make the first option value the empty string. You will have to come with another value for your "none" option.
See also Can I apply the required attribute to <select> fields in HTML5?
This is pure HTML.
<form action="/xyz.jsp">
<select required>
<option value="" selected hidden>Select one of your active items...</option>
<option value="none">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
I am trying to hide the placeholder text in a dropdown menu from showing up as a selectable option. I have searched other options on stack overflow and tried the following solution but none have worked:
<option style="display:none" >Select Stop</option>
<option value="" disabled selected hidden >Select Stop</option>
<option value="" disabled selected style="display: none;">Select Stop</option>
My code looks like this which WORKS in stackoverflow but not when I put it into my site using latest version of chrome...
<select>
<option value="" disabled selected hidden>Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
Not sure what are you actually trying achieve, to hide the select or option simply add disabled to them, see below, i have 2 select, one with option disbaled other one the entire select disabled
<select>
<option value="">Select Stop</option>
<option value="home" >home</option>
<option value="school" disabled>school</option>
<option value="office" >office</option>
</select>
<select disabled>
<option value="" >Select Stop</option>
<option value="home" >home</option>
<option value="school" >school</option>
<option value="office" >office</option>
</select>
Maybe you might want to add some JQuery into your file
$(function() {
$('.location').find('option:contains(office)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='location'>
<option value="select stop">Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
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>
This is my simple HTML Select Program ,
by default its showing value as Volvo (the first value )
Is it possible that , not to show any value and let the user select ??
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
It's really simple. Just add a blank option:
<form action="demo_form.asp">
<select name="cars">
<option></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
Add a blank option to the first position. Be sure to give it a value that you can then check for in your submit handler. EDIT: Or just use selectedIndex.
i.e.
if(document.getElementById("select1").selectedIndex != 0){
form1.submit();
}
else {alert("Please select a value!");}
to validate they have selected something.
<form name="form1" id="form1" action="demo_form.asp">
<select id="select1"name="cars">
<option value="none"></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
There are two ways:
1) Disable first item:
<select name="cars">
<option value="" disabled>[Select an item]</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
2) Make first item empty, as already suggested.
<select name="cars">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
create a div (i called it "noShow"),
<div class="noShow">
<form action="demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</div> <!-- end noShow DIV
then, using Style sheets (CSS), apply this to the cars
.noShow option:first-child{
display:none;
try that, good luck
There's no "clean" way to do what you are asking - an HTML select will always display one of the values.
You can, however, include a 'Not Selected' option:
<option value=''>--Not Selected--</option>
but then you also have to do some validation to make sure that the user actually picks a valid value. That's a topic for a different question. :)
Easiest way is to do something like this, if you also wanna provide some information:
<form action="demo_form.asp">
<select name="cars">
<option value="default">Pick Something!</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>