I have the following html code
<select name="Gender" class="form-control">
<option value="m">Male</option>
<option value="f">Female</option>
</select>
I want to change the select option on click with AngularJs.
I've tried almost everything, and I realize that the problem occurs when the click event is called, if there is no click event it works fine
HTML:
<body ng-app ng-controller="AppCtrl">
<div ng-click="setGender()">Set</div>
<select name="Gender" class="form-control">
<option value="m" ng-selected="{{GenderInfo.Gender =='m'}}">Male</option>
<option value="f" ng-selected="{{GenderInfo.Gender =='f'}}">Female</option>
</select>
</body>
AngularJs:
function AppCtrl($scope) {
$scope.setGender = function(){
$scope.GenderInfo = {
Gender: 'f'
}
}
}
JsFiddle:
http://jsfiddle.net/dCFd2/231/
You don't need curly braces inside ng-selected:
<option value="m" ng-selected="GenderInfo.Gender =='m'">Male</option>
<option value="f" ng-selected="GenderInfo.Gender =='f'">Female</option>
Try it like so:
<body ng-app ng-controller="AppCtrl">
<div ng-click="setGender()">Set</div>
<select name="Gender" class="form-control">
<option value="m" ng-selected="GenderInfo.Gender =='m'">Male</option>
<option value="f" ng-selected="GenderInfo.Gender =='f'">Female</option>
</select>
</body>
the ngSelected doesn't need {{}} because it evaluates the expression given.
Hope this helped. I've tested it with your jsFiddle and it seem to work fine.
See my code with ng-options:
<select ng-model="GenderInfo" name="Gender" class="form-control" ng-options="g.value as g.title for g in gender">
Javascript:
$scope.gender = [
{value:'m',title:'Male'},
{value:'f',title:'Female'}
];
$scope.GenderInfo = $scope.gender[0].value;//Set Default gender
You can use ng-options See Example
<select ng-init="model.Gender = genders[0].Key" name="Gender" class="form-control" ng-model="model.Gender" ng-options="g.Key as g.Gender for g in genders">
Related
edit: see "Edit" Section for updated question
I am trying to make the second dropdown selection dependent of the first, using jquery.
get "data-type" of first selection
if "data-type" == "String" trigger filter change of second selections "data-foo" containing value N
HTML Selections
<select id="first" name="first-selection" class="form-control">
<option value="a" class="b" data-type="c">a</option>
</select>
<select id="second" name="second" class="form-control">
<option value="n" data-foo="m">n</option>
</select>
I used to following code to check if I am able to get the "data-type" value and display it. But any attempt to get the data for an if statement failed so far.
$('#first').change(function () {
var selected = $(this).find('option:selected');
$('#type').html(selected.data('type'));
}).change();
edit - code with if statement
how do I use "data-type" for an if statement?
EDIT
New code and jsfiddle to make myself clear
<select id="first" name="first-selection" class="form-control">
<option value="1" class="type1" data-type="snowboot">bli</option>
<option value="2" class="type2" data-type="nose">bla</option>
<option value="3" class="type3" data-type="head">blu</option>
</select>
<p>Test output: <span id="type"></span>.</p>
<select id="second" name="second-selection" class="form-control">
<option value="11" data-foo="green">one of three</option>
<option value="22" data-foo="red">two of three</option>
<option value="33" data-foo="red">three of three</option>
</select>
$(function(){
$('#first').change(function(){
var selected = $(this).find('option:selected');
$('#type').html(selected.data('type'));
}).change();
});
Question
How do I use "data-type" and put it as an if statement before the function? The following won't do anything
if ($('select[id=first] option').filter(':selected').type() == "nose")
if(selected.data('type') == "nose")
var myvar = $('#first option:selected').data();
if(myvar == 'nose')
This is the code I want to run after the if statement:
var $firstvar= $("#first");
$secondvar= $("#second");
$options = $secondvar.find('option')
$firstvar.on('change', function () {
$secondvar.html($options.filter('[data-foo="' + 'red' + '"]'));
}).trigger('change');
This will do what you want. It will check, whether the selected option of the first select was of any of the types mentioned in the object conditions and will then go through all options of the second select and either show or hide them (using the jQuery .toggle(.toggle(!isNose||this.dataset.foo==="red")) method). The expression show=!found||this.dataset.foo===found will evaluate to true for all cases where found is undefined and to false only if found is "trueish" AND this.dataset.foo===found is false.
$(function() {
const conditions={nose:"red",head:"green"}; // add as many as you like ...
$('#first').change(function() {
let show,first=true; // first makes sure only ONE option can be set
const found=conditions[ $(this).find(":selected").data("type") ];
$('#second option').each(function(){
$(this).toggle(show=!found||this.dataset.foo===found);
if(first&&show) first=!(this.selected=true); // select first visible option
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="first" name="first-selection" class="form-control">
<option value="1" class="type1" data-type="snowboot">bli</option>
<option value="2" class="type2" data-type="nose">bla</option>
<option value="3" class="type3" data-type="head">blu</option>
</select>
<p>Test output: <span id="type"></span>.</p>
<select id="second" name="second-selection" class="form-control">
<option value="11" data-foo="green">one of three</option>
<option value="22" data-foo="red">two of three</option>
<option value="33" data-foo="red">three of three</option>
</select>
In brief, in the profile page, I have the following code:
<select name="sex" >
<option value="Male"> Male</option>
<option value="Female">Female</option>
</select>
Looks fine :)
However,
When the user wants to update his choice,,, I have an update profile page where I put the same code as:
<select name="sex" >
<option value="Male"> Male</option>
<option value="Female">Female</option>
</select>
My problem is that I couldn't put the previously selected option as default when the page is loaded... Is there a way to load the page with the previously select option as default ?
Many thanx :)
I got the answer :) by implementing the JSTL - <c:if> Tag as follows:
<select name="gender">
<option value="Male" <c:if test="${THE_PATIENT.getGender() == 'Male'}"> selected </c:if>>Male</option>
<option value="Female" <c:if test="${THE_PATIENT.getGender() == 'Female'}"> selected </c:if>>Female</option>
</select>
I have a html form which has a dropdown consisting of a few values. If the user does not select an option and moves to the next field, I need to give an error message. I have used the required attribute but it does not fire in Chrome and Firefox.
This is my code :
<select name="gender" id="gender" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
The required attribute does not work on Chrome and Firefox. A JavaScript solution would also be good. At the time of submitting the data I am checking for empty fields but I would like to display an error message if the user does not select a value from the dropdown and moves to the next field.
Use below code, not need any script, use form tag
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">None</option>
<option value="demo">demo</option>
<option value="demo1">demo1</option>
<option value="demo2">demo2</option>
<option value="demo3">demo3</option>
</select>
<input type="submit">
</form>
</body>
</html>
Try using the onfocusout option on your select paired with some Javascript.
HTML
<select name="gender" id="gender" onfocusout="check()" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
JS
function check(){
var x = document.getElementById("gender").selectedOptions[0].label;
if(x == "Select Gender"){
alert("Please select an option.");
}
}
CodePen.io: https://codepen.io/anon/pen/XQxQgw
There's undoubtedly a more efficient way of doing this and you would need to tweak the JS to check if all fields have been completed etc. but that's my two cents in a pinch!
Here's a simple form I have:
<form name="form_1">
<fieldset>
<select required name="choice">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="Other">Other</option>
</select>
<label for="other_text">If other, please specify: </label>
<input id="other_text" name="other_text" size="30">
</fieldset>
</form>
How do I make the "other_text" input field required if, and only if, the "choice" selection is set to value "Other"? By default, the input field should not be required. Could this be done with only HTML5, or is Javascript required?
Since this use case is dependent upon user interaction and selection of an appropriate menu item, it requires Javascript, and can't be achieved independently with HTML5. You may use following snippet for the requested scenario
<form name="form_1">
<fieldset>
<select required name="choice">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="Other">Other</option>
</select>
<label for="other_text">If other, please specify: </label>
<input id="other_text" name="other_text" size="30">
</fieldset>
</form>
<script type="text/javascript">
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(e) {
if (document.getElementsByTagName('select')[0].value == "Other") {
e.preventDefault();
// Block submitting form if option = Other selected
document.getElementById('other_text').setAttribute('required', true);
return false;
}
// Allow form submit otherwise
document.getElementById('other_text').removeAttribute('required');
console.log("Submitting form", e);
return true;
}
</script>
I believe that you must use a scripting language like javascript for this. Give your select field an ID and call your javascript funciton
<form name="form_1">
<fieldset>
<select required name="choice" id="choice" onchange="changeAttribute()">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="Other">Other</option>
</select>
<label for="other_text">If other, please specify: </label>
<input id="other_text" name="other_text" size="30">
</fieldset>
</form>
Then use javascript to manipulate the other field
function changeAttribute(){
if(document.getElementById('choice').value == "Other") {
document.getElementById('other_text').setAttribute("required","");
}else{
document.getElementById('other_text').removeAttribute("required","");
}
}
I am new to Angularjs.I am trying to set default value for select in angularjs with static values.I am not using any ng-repeat or options.But i am not able to set default value using ng-selected.Everywhere i find solutions only for ng-options but not for static values.
Here is my html
<select name="gender" id="gender" data-ng-model="gender" ng-
selected=="Male">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
Can anyone tell where i am doing wrong?
You can set default value for ng-model in controller, try adding this in your controller
$scope.gender = 'Male';
You can use ng-init directive. As Sraven said , ng-selected must use <option> tag.
My Example
<select name="gender" id="gender" data-ng-model="gender" ng-init="gender='Male'">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
According to official DOCS, ng-selected is for options not for select.
You should have the boolean as ng-selected value
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<select ng-init="mySel = true">
<option>Select</option>
<option value="male" ng-selected="mySel">Male</option>
<option value="female">Female</option>
</select>
</body>
</html>
Please check this example using ng-model
The preferred way of doing this is using ng-model without ng-selected
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" >
<select name="gender" id="gender" ng-model="gender" ng-controller="myCtrl">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.gender = "Male"
});
</script>
</body>
</html>
ng-selected directive can be used only in <option> tag
Check the below code
<select name="gender" id="gender" data-ng-model="gender" >
<option value="">Select Gender</option>
<option ng-selected="true" value="Male">Male</option>
<option value="Female">Female</option>
</select>