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>
Related
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!
I have a form with two datalist and I would like to generate a link based on the user's selection.
<form>
<input list="Cars">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
</form>
For an example, if user chooses Honda and 2017, then the link appears and the address is Honda/2017.net. If the user chooses Subaru and 2015 then the address is Subaru/2015.net and etc.
I can input the different href manually in the code but I am not sure how you make one link change based on selection?
You need Javascript for the so called dynamic html or DHTML. Could be done like this:
<!DOCTYPE html>
<script type="text/javascript">
function generateLink()
{
var brand = document.getElementById('carBrand').value;
var year = document.getElementById('carYear').value;
document.leform.action =brand + '/' + year + '.html';
return true;
}
</script>
<form name="leform" onsubmit="return generateLink();">
<input list="Cars" id='carBrand'>
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" id='carYear'>
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
<input type="submit">
</form>
What happens?
If the submit Button is clicked, the generateLink() function is called. onsubmit="return generateLink();"
In the generateLink() function the value of the selected option for the car/brand and the year are read from html using the getElementById function.
Then the extracted values for the brand and the year are used to generate the corresponding link via concatenation of car, a slash, the year and finally the string '.html'.
The link the form will redirect to is set in the forms action attribute. document.leform.action
To process data submitted by the form you will need some kind of CGI mechanism: https://en.wikipedia.org/wiki/Common_Gateway_Interface
You could use PHP to pass data further to a database for example.
Hope this helps ^^-d
PS: You could also want to implement the page that follows the form (action=) in PHP as dynamic content. Using a HTTP GET Request this could look like /show.php?car=Subaru&Year=2016 which would save you from creating an html file per option (car X year = 15 files!). URLs of HTTP GET Requests can be bookmarked like Honda/2017.net. More info on this here: http://php.net/manual/en/reserved.variables.request.php
use below snippet as a boilerplate.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input list="Cars" onchange="generateUrl()">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" onchange="generateUrl()">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
</form>
<p id="generated">
</p>
<script type="text/javascript">
function generateUrl(){
var x = document.querySelector("[list='Cars']").value;
var y = document.querySelector("[list='Years']").value;
document.getElementById('generated').innerHTML = (x+y);
}
</script>
</body>
</html>
You can grab the values of the <datalist> using the onchange event; store them in a variable somewhere, then write it out to your link.
var car = '';
var year = '';
$("input[name=car-list]").on('change', function(){
car = $(this).val();
});
$("input[name=yr-list]").on('change', function(){
year = $(this).val();
});
$("input[name=submit]").on('click', function(){
$("#mylink").attr('href', car + '/' + year);
$("#mylink").html(car + '/' + year);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input list="Cars" name="car-list">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" name="yr-list">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="button" name="submit" value="Submit">
<input type="reset">
</form>
<a id="mylink" href="">My Link</a>
Hi My current scenario is this: I want a default value too that should select.. Even if select is selected then also acceptable.. but it is blank at first..My code is this
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>
I'ave used this code too but not working :(
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
<option selected="selected">Select</option>
</select>
Checkout my code please.
You can modify your code like this :
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
<option value="">Select</option>
</select>
here is the plnkr : http://plnkr.co/edit/fekkRctRM59ydI6zDnpY?p=preview
or you can use ng-init like as mentioned by #zsong
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-init="selectedItem='YourDefaultValue'" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>
Or you can look at this
var myApp = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
</div>
Code for to displays by default Select options
<select ng-model="your model" ng-options="your options">
<option selected="selected" value="">Select options</option>
</select>
Your ngModel is selectedItem, so you have to set selectedItem to the value which you want as default in your controller:
//This sets the default value to the first item in your list
$scope.selectedItem = $scope.task.dropdownvalues[0].value
You should not have an option tag if using an ng-option
utilize ng-model instead as below.
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
in your controller
$scope.selectedItem = dropdown_values[0];
will resolve your issue.
Many times I have spend hours to find out the solution, believe me!
[ 1 ] Select Option with Numbers (Used in Pagination, Page Size Selection)
<select id="select_pagination_pages" ng-model="recordsInPage">
<option value="10" selected>10</option>
<option value="15">15</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
Inside Controller, particular page init function, I have inserted 10 as String.
$scope.recordsInPage = "10".toString();
[ 2 ] Second Select Option is with simple yes or no selection.
<select class="rfc_text" id="select_flag" ng-model="rfc.flag">
<option value="yes" selected>YES</option>
<option value="no">NO</option>
</select>
Inside Controller initialized rfc.flag like -
$scope.rfc.flag = "yes";
[ 3 ] This third one Select Option is special and with tiny scenario, where model will only use last four option values, but the first one is selected by default.
<select id="select_timezone" ng-model="timezone_search">
<option value="" selected>Search Entire</option>
<option value="CountryCode">Country Code</option>
<option value="CountryName">Country Name</option>
<option value="TimeZone">Time Zone</option>
<option value="TimeOffset">Time Offset</option>
</select>
Inside page controller init -
$scope.timezone_search = "";
I think three examples would be enough for peoples. :D
Hello is there anyway to have a value selected by giving in a value?
<select name="color">
<option value="black">black</option>
<option value="white">white</option>
<option value="red">red</option>
</select>
For example if I want black to be selected I would set selected = black.
Rather than using <option value="black selected>black</option>
Thank you for assistance, please let me know if there is any misunderstanding.
If you are not averse to using js and jquery:
<select name="color" id="color">
<option value="black">black</option>
<option value="white">white</option>
<option value="red">red</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$("#color").val("black");
});
</script>
If you want to work with multiple select options, you can use this:
$("#color").val(["black"]);
// for single select option
$("#color").val(["black","red","white"]);
// for multiple select options
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>