I have reasons for rescheduling job and also sub-reason under a reason. I want that on selecting the reason, its sub-reason should appear. How do I do that?
<select>
<option value="" disabled="disable" selected="selected">
Select Reason
</option>
<option ng-repeat="reasons in Resonse_schedule ">
{{reasons.reasons}}
</option>
</select>
Use ng-options
AngularJS provides a directive ng-options to dynamically list down the options
<select ng-options="reason.reason as reason.reason for reason in Resonse_schedule">
<option value="" selected disabled >Select Reason</option>
</select>
I would suggest you to go through the documentation of ngOptions to understand it better
You can use this:
<select ng-model="reasonVar" ng-options="reason as reason.name for reason in Resonse_schedule">
<option value="" disabled="disable" selected="selected">Select Reason
</option>
</select>
<select ng-model="reasonSelected">
<option ng-repeat="subReason in reasonVar.subReasons" value="subReason.name">
{{subReason.name}}
</option>
</select>
Where reasonVar is the selected value from the Resonse_schedule list.
Here's a working example for this code:
http://jsfiddle.net/U3pVM/35122/
And here's more complicated one:
http://jsfiddle.net/miparnisari/u50hgn5a/
I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.
I updating a form to angular. The selects in it are not generated by angular. I am using angular to add some interactivity and submit the form. I am having an issue where angular is adding a blank select to the element. Is there a way of preventing this without having angular generate the select?
<select name="inventory_status" ng-model="formData.inventory_status">
<option ng-selected="true" ng-value="1">Active</option>
<option ng-value="2">Discontinued</option>
<option ng-value="3">Special Order</option>
<option ng-value="4">Pre-Order</option>
</select>
The above code produces this:
<select name="inventory_status" ng-model="formData.inventory_status" ng-init="sortorder='1'" class="ng-pristine ng-valid ng-touched"><option value="? undefined:undefined ?"></option>
<option ng-selected="true" ng-value="1" value="1" selected="selected">Active</option>
<option ng-value="2" value="2">Discontinued</option>
<option ng-value="3" value="3">Special Order</option>
<option ng-value="4" value="4">Pre-Order</option>
</select>
My hope is to not have this produced:
<option value="? undefined:undefined ?"></option>
Additionally I would like to not have to use angular to generate the dropdown although if that is the only option I could. This only happens when I set this field to ng-model. I am setting it to ng-model because I want to use angular to submit the form.
Thanks in advance.
Set $scope.formData.inventory_status = 1 or whatever value you want selected and it will not show the empty option, plus you don't need ng-selected if you set the value.
I'm working with JQuery mobile. I am building a form that includes the following code:
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Unspecified</option>
<option value="-1">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
A custom menu is shown here. Right now, when someone clicks the drop down, a dialog appears with multiple options. The dialog title says "Unspecified". I know it says this because "Unspecified" is the first option. What I want is, the drop down to default to "Unspecified" and the dialog title to say "Please choose...".
I can't seem to figure out how to do this? I don't see any properties that you can set to accomplish this. Then I thought about listening for the "tap" event, but I couldn't seem to get that to work either.
Try This:
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Please choose...</option>
<option value="-1" selected="selected">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
Does something like this work?
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Please Choose</option>
<option value="-1" selected="selected">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
How can I check if a user has selected something from a <select> field in HTML?
I see <select> doesn't support the new required attribute... do I have to use JavaScript then? Or is there something I’m missing? :/
Mandatory: Have the first value empty - required works on empty values
Prerequisites: correct html5 DOCTYPE and a named input field
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
As per the documentation (the listing and bold is mine)
The required attribute is a boolean
attribute.
When specified, the user
will be required to select a value
before submitting the form.
If a select element
has a required attribute specified,
does not have a multiple attribute specified,
and has a display size of 1 (do not have SIZE=2 or more - omit it if not needed);
and if the value
of the first option element in the
select element's list of options (if
any) is the empty string (i.e. present as value=""),
and that
option element's parent node is the
select element (and not an optgroup
element),
then that option is the
select element's placeholder label
option.
The <select> element does support the required attribute, as per the spec:
http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element
Which browser doesn’t honour this?
(Of course, you have to validate on the server anyway, as you can’t guarantee that users will have JavaScript enabled.)
Yes, it's working:
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
you have to keep first option blank.
You can use the selected attribute for the option element to select a choice by default. You can use the required attribute for the select element to ensure that the user selects something.
In Javascript, you can check the selectedIndex property to get the index of the selected option, or you can check the value property to get the value of the selected option.
According to the HTML5 spec, selectedIndex "returns the index of the first selected item, if any, or −1 if there is no selected item. And value "returns the value of the first selected item, if any, or the empty string if there is no selected item." So if selectedIndex = -1, then you know they haven't selected anything.
<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
function displaySelection()
{
var mySelect = document.getElementById("someSelectElement");
var mySelection = mySelect.selectedIndex;
alert(mySelection);
}
</script>
You need to set the value attribute of option to the empty string:
<select name="status" required>
<option selected disabled value="">what's your status?</option>
<option value="code">coding</option>
<option value="sleep">sleeping</option>
</select>
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input -> raising the required message.
w3schools
The value attribute specifies the value to be sent to a server when a form is submitted.
Example
<form action="">
<select required>
<option selected disabled value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>
try this, this gonna work, I have tried this and this works.
<!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>
Make the value of first item of selection box to blank.
So when every you post the FORM you get blank value and using this way you would know that user hasn't selected anything from dropdown.
<select name="user_role" required>
<option value="">-Select-</option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
first you have to assign blank value in first option.
i.e. Select here.than only required will work.
Works perfectly fine if the first option's value is null. Explanation : The HTML5 will read a null value on button submit. If not null (value attribute), the selected value is assumed not to be null hence the validation would have worked i.e by checking if there's been data in the option tag. Therefore it will not produce the validation method. However, i guess the other side becomes clear, if the value attribute is set to null ie (value = "" ), HTML5 will detect an empty value on the first or rather the default selected option thus giving out the validation message. Thanks for asking. Happy to help. Glad to know if i did.
In html5 you can do using the full expression:
<select required="required">
I don't know why the short expression doesn't work, but try this one.
It will solve.
Try this
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
You can do it also dynamically with JQuery
Set required
$("#select1").attr('required', 'required');
Remove required
$("#select1").removeAttr('required');