I'm trying to make a <select> where the first <option> is empty, it is not visible in the dropdown and not selectable.
I've been researching for like 4 hours. I saw so many working options but the thing is that none of them (or at least what I've found) are working on Safari.
This is my code:
<select class="custom-select" formControlName="subindustryName">
<option *ngFor="let subindustry of subIndustries" [value]="subindustry.value">
{{subindustry.label}}
</option>
</select>
I'm not using jQuery.
would this work for you? you can set style properties for an option and disable the field so it's not selectable anymore. this question seems to have been answered with another post. default empty option.
<select>
<option disabled selected value style="display:none"></option>
<option value="one">one</option>
<option value="two">three</option>
</select>
Just add option with value undefined to force angular to select that value. like below
<select class="custom-select" formControlName="subindustryName">
<option value="undefined"></option>
<option *ngFor="let subindustry of subIndustries"
[value]="subindustry.value">{{subindustry.label}}</option>
</select>
and with if you want to it to be not selectable then add 'disabled' attribute with that.
EDIT AS PER COMMENT
so whatever you pasted in question should work.
Here is my code snippet which is working..
<div class="form-group">
<label class="col-md-3 control-label">Gender</label>
<div class="col-md-3">
<select id="gender" class="form-control" [(ngModel)]="userModel.gender" name="gender" required >
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
Just try with template driven approach for 'subindustryName' and check.
<option disabled selected value>Select Option</option>
<option value="one">one</option>
<option value="two">two</option>
In both Safari and Chrome, default disabled selected value is this.
if you use like.
<select>
<option> Select Option </option>
<!-- replace above code with -->
<option value='' selected> Select Option </option>
</select>
Hope this will work.
Related
On my form, I'm trying to make the select box display the standard "select one" option so the user can click on it and pick among the 3 options I've made. I want this part of the form to be required while also not allowing the default option to go through. Any help in making the first option not work would be appreciated! Thank you!
<option selected="selected">Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
Just change
<select required>
<option value="" selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Users can never submit the default option.
You could have the Select one option be both selected and disabled, like this.
function validate(self) {
console.log(self.value);
}
<select onchange="validate(this)" required>
<option disabled selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
The onchange event will trigger whenever a new value is chosen in the dropdown.
The selected tag makes sure its the default option.
The disabled tag makes sure it can't be chosen as an actual option.
The required tag prevents the form from submitting if the dropdown value is still its default.
The "select one" text should really not be an option, but instead a label
<label>Select One:</label>
<select>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
I'am using this code along with php code for a select and used required class to make it mandatory but it is not working. Does anyone can help me.I have included this html section along with php code.
<select name="category" required="required" class="form-control">
<option value=" ">--Select Category--</option>
<option value="asd">asd</option>
</select>
Try to remove space value in your select category option
<select name="category" required="required" class="form-control">
<option value="">--Select Category--</option>
<option value="asd">asd</option>
</select> code here
First of all, replace
<option value=" ">--Select Category--</option>
with
<option value="">--Select Category--</option>
And then, as w3c says, ... "The required attribute is a boolean attribute. When specified, the element is required."
<select name="category" required class="form-control">
<option value="">--Select Category--</option>
<option value="asd">asd</option>
</select>
Also here you can find same example.
And here you can try the code.
Required is working. The fact is that " " is a value and "" is not.
You have to add required and value attributes
<select required="true" name="unit">
<option disabled selected value="">-- Select One --</option>
<option>Square Feet</option>
<option>Square Yards</option>
<option>Square Meters</option>
<option>Marla</option>
<option>Kanal</option>
In my case, the required attribute on the select element wasn't working because the first option element had the selected attribute added.
selected attribute broke the required attribute
<label for="procedures_of_interest">Procedures Of Interest</label>
<select name="procedures_of_interest" id="procedures_of_interest" required multiple="multiple">
<option value="" selected disabled>Select One or More</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="last">last</option>
</select>
By removing the the selected attribute from the option element, the required and multiple attributes both worked correctly on the select element:
<label for="procedures_of_interest">Procedures Of Interest</label>
<select name="procedures_of_interest" id="procedures_of_interest" required multiple="multiple">
<option value="" disabled>Select One or More</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="last">last</option>
</select>
Try changing the required part to true
So it'll be like required="true", did it work?
You are using required only which is HTML5 validation, may be its not work on all browser. Is you are looking for the proper validation i suggest to with jquery validation.
Validation Document
I have this type of multiple select dropdown menu I want to add to my form
<form>
...
<select id="example2" multiple="multiple">
<div id="otherChoices">
<optgroup label="Academic" class="blah">
<option value="Engineering" class="blah">Engineering</option>
<option value="Humanities">Humanities</option>
<option value="Life_Sciences">Life Sciences</option>
<option value="Social Sciences_Sciences">Social Sciences</option>
</optgroup>
<optgroup label="Clubs">
<option value="Event">Event </option>
<option value="Meeting">Meeting</option>
<option value="Performance">Performance</option>
</optgroup>
<optgroup label="Personal">
<option value="Discussion">Discussion</option>
<option value="Event">Event</option>
<option value="Food">Food</option>
<option value="Hangout">Hangout</option>
<option value="Trip">Trip</option>
</optgroup>
</div>
</select>
</form>
But I'm not sure what type of input form this is (it's a bootstrap created form but not of a valid input type), so I'm not sure exactly how to send the parameters via a post request. Currently, I'm using jquery to grab the selected values and and fill in a hidden form. Is there a better way about this?
You made a few mistakes in your HTML:
This is the corrected version:
<form action="test2.php" method="post">
<select name="example2[]" id="example2" multiple="multiple" >
<div id="otherChoices" name="hello">
<optgroup label="Academic" class="blah">
<option value="Engineering" class="blah">Engineering</option>
<option value="Humanities">Humanities</option>
<option value="Life_Sciences">Life Sciences</option>
<option value="Social Sciences_Sciences">Social Sciences</option>
</optgroup>
<optgroup label="Clubs">
<option value="Event">Event </option>
<option value="Meeting">Meeting</option>
<option value="Performance">Performance</option>
</optgroup>
<optgroup label="Personal">
<option value="Discussion">Discussion</option>
<option value="Event">Event</option>
<option value="Food">Food</option>
<option value="Hangout">Hangout</option>
<option value="Trip">Trip</option>
</optgroup>
</div>
</select>
<button type="submit">Submit</button>
</form>
EDIT:
This is what I corrected:
I added a name value to the select with square brackets to show its an array
I added a method type to the form: method="post"
Submit button
You can then access the individual items like this:
echo $_POST["example2"][0];
EDIT: Sorry I realised this is Node.js That one was for PHP. See this link for how to get post variable in node js:
How do you extract POST data in Node.js?
When you submit a form, it passes an array to the next page, specified in the form's action attribute. If one isn't set, it will submit to the current URL.
By default, forms will submit using GET unless set the method attribute to post.
So, change your <form> tag to the following:
<form method="post" action="test.php">
And give your select a name, like name="test_select".
And then your test.php can look like this:
<?php
print_r($_POST);
(no need for a ?> closing tag)
This will print the $_POST array and you'll see how multiple selects work.
<select name='main'>
<option value='For Sale'>For Sale</option>
<option value='Community'>Community</option>
</select>
<select name='sub'>
<option value='Animal'>Animal</option>
<option value='Fish'>Fish</option>
</select>
<select name='sub'>
<option value='Friend'>Friend</option>
<option value='Relitive'>Relitive</option>
</select>
<select name='sub2'>
<option value='Animal Thing'>Animal Thing</option>
<option value='Fish Thing'>Fish Thing</option>
</select>
<select name='sub'>
<option value='Best Friend'>Best Friend</option>
<option value='Relitive Home'>Relitive Home</option>
</select>
This is my html code and I want that when the user selects the main menu it will then show the sub menu and when the user selects the sub menu it will then show sub2 menu. I want to do this with Jquery, can someone help me with this?
I'm supposing that the sub and sub2 classes are disabled / hidden?
You want to check if the user has selected a value in the main.
You can find this in the Jquery documentation :selected Selector
So now you can see if you're main select was selected and then you can use this to enable to next select sub
If you want furthermore details on Selector, I think this question How to check if an option is selected? has some solid answers.
Cheers!
I'm trying to modify a select element with the 'multiple' attribute to only select/disselect the one option selected, instead of disselecting all options and selecting the one target.
Let's say we got this:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
What I want to happen when you select an option is:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option value="val2">Val2</option> <!-- Disselected -->
<option value="val3">Val3</option>
</select>
Instead of:
<select name="somename[]" multiple="multiple">
<option value="val1">Val1</option>
<!-- All other values are disselected except the one option selected -->
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
I hope that made sense. If not please let me know.
I've tried using jQuery and hooking a click function on the select element, hoping to intersect the selected option but that failed. Appearently the selections are made before the event is triggered.
Thanks.