document.getElementById(“”).value returns object instead value
Question
I have an data in below given format
{
USA: {
CA: { 'SAN FRANCISCO':['94188', '94158', '94143'] },
LA: { 'BATON ROUGE':['70898','70895','70891'] }
}
}
trying to add them to dependent drop downs namely Country, State, City and Zip code. I'm using ng-option but while getting the value for country dropdown its returning oject:16 instead of value.
$scope.countries = {
USA: {
CA: { 'SAN FRANCISCO':['94188', '94158', '94143'] },
LA: { 'BATON ROUGE':['70898','70895','70891'] }
}
}
$scope.GetSelectedCountry = function () {
$scope.strCountry = document.getElementById("country").value;
}
<b>Country:</b>
<select id="country" ng-model="statessource" ng-disabled="!type" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()">
<option value=''>Select Country</option>
4 answers
solution1
3 2017-01-18 08:31:32
It is not the Angular way to get values.
You use <select ng-model="statessource" ...> , so the value of the select is stored in $scope.statessource .
This should works:
$scope.GetSelectedCountry = function() {
$scope.strCountry = $scope.statessource;
}
solution2
1 ACCPTED 2017-01-18 08:39:28
You have used an ng-model variable for your select tag, but you have not used that in your controller to get the selected value. There is no need to access the value using javascript dom selector, instead you can directly use the model value of the select tag $scope.statessource .
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.countries = { USA: { CA: { 'SAN FRANCISCO': ['94188', '94158', '94143'] }, LA: { 'BATON ROUGE': ['70898', '70895', '70891'] } } } $scope.GetSelectedCountry = function () { $scope.strCountry = $scope.statessource; console.log($scope.strCountry); } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <b>Country:</b> <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> <option value=''>Select Country</option> </select> </body> </html>
solution3
0 2017-01-18 08:36:50
If your only concern is to get the currently selected value each and every time a user changes it, your ng-model will already handle this case. So, by using this
<select id="country" ng-model="statessource" ng-disabled="!type" ng-options="country for (country, states) in countries">
Angular would always apply its two-way-data-binding to store the currently selected option inside your $scope.statessource -variable.
Other than that, if you want to do other stuff related to a change of the selection, you can do the following:
<select id="country" ng-model="statessource" ng-disabled="!type" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry(statessource)">
$scope.GetSelectedCountry = function (newState) {
// Do something with your newState variable.
// Remember, $scope.statessource still includes the currently selected
// option
}
I hope that helped :)
solution4
-1 2017-01-18 08:23:34
The way to access the selected value of an OPTION nested in a SELECT is here:
var e = document.getElementById("country");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.