document.getElementById("").value returns object instead value

Question

我有以下给定格式的数据

{
 USA: { 
    CA: { 'SAN FRANCISCO':['94188', '94158', '94143'] },
    LA: { 'BATON ROUGE':['70898','70895','70891'] }
  }
}

正在尝试将它们添加到相关下拉菜单中，即国家、州、城市和邮政编码。我正在使用 ng-option 但在获取国家/地区下拉列表的值时返回 oject:16 而不是值。

$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>
&nbsp;
<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>

Answer 1

访问嵌套在 SELECT 中的 OPTION 的选定值的方法在这里：

var e = document.getElementById("country");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

Answer 2

这不是获取值的Angular方式。

您使用<select ng-model="statessource" ...>，所以select的值存储在$scope.statessource。

这应该有效：

$scope.GetSelectedCountry = function() {
    $scope.strCountry = $scope.statessource;
}

Answer 3

如果您唯一关心的是每次用户更改当前选择的值时，您的 ng-model 已经可以处理这种情况。所以，通过使用这个

<select id="country" ng-model="statessource" ng-disabled="!type" ng-options="country for (country, states) in countries">

Angular 将始终应用其 two-way-data-binding 将当前选择的选项存储在您的 $scope.statessource 变量中。

除此之外，如果您想做其他与更改选择相关的事情，您可以执行以下操作：

<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
}

希望对您有所帮助:)

Answer 4

您为 select 标签使用了 ng-model 变量，但您没有在控制器中使用它来获取 selected 值。无需使用 javascript dom select 访问值，或者您可以直接使用 select 标签 $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> &nbsp;
    <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>

document.getElementById("").value returns object instead value

document.getElementById("").value returns object instead value

javascript

angularjs

angularjs-ng-options