程序员经验分享-hwhale

根据所选国家，需要填充州和城市

2023-12-05

HTML:

<label for="country">Country *</label>
 <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"
                ng-change="GetSelectedCountry()">
 <option value=''>Select</option>
</select>    
 <label for="state">State *</label>
<select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource"
         ng-change="GetSelectedState()"><option value=''>Select</option>
 </select>
  <label for="city">City *</label>
 <select id="city" ng-disabled="!citiessource || !statessource" ng-model="city"><option value=''>
  Select</option>
<option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option>
 </select>

JS:

$scope.countries = {

                'USA': {
                    'Alabama': ['Montgomery', 'Birmingham'],
                    'California': ['Sacramento', 'Fremont'],
                    'Illinois': ['Springfield', 'Chicago']
                },
               'India': {
                    'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                    'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                    'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                },
                'Australia': {
                    'New South Wales': ['Sydney'],
                    'Victoria': ['Melbourne']
                }
            };

 $scope.GetSelectedCountry = function () {
                $scope.strCountry = document.getElementById("country").value;
            };
            $scope.GetSelectedState = function () {
                $scope.strState = document.getElementById("state").value;
            };

我在上面编写了 JSON $sope.countries 来根据国家/地区填充州和城市。 我的国家和州字段填充完美，但我的城市没有任何项目。基于所选国家/地区填充州和城市的任何其他解决方案也将发挥作用。


<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-controller="testController">



  <label for="country">Country *</label>
  <select id="country" ng-model="countrySrc" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()">
    <option value=''>Select</option>
  </select>
  <label for="state">State *</label>
  <select id="state" ng-disabled="!countrySrc" ng-model="stateSrc" ng-options="state for (state,city) in countrySrc" ng-change="GetSelectedState()">
    <option value=''>Select</option>
  </select>
  <label for="city">City *</label>
  <select id="city" ng-disabled="!countrySrc || !stateSrc" ng-model="city" ng-options="city for city in stateSrc">
    <option value=''>Select</option>

  </select>

  <script>
    angular
      .module('myApp', [])
      .run(function($rootScope) {
        $rootScope.title = 'myTest Page';
      })
      .controller('testController', ['$scope',
        function($scope) {


          $scope.countries = {

            'USA': {
              'Alabama': ['Montgomery', 'Birmingham'],
              'California': ['Sacramento', 'Fremont'],
              'Illinois': ['Springfield', 'Chicago']
            },
            'India': {
              'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
              'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
              'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
            },
            'Australia': {
              'New South Wales': ['Sydney'],
              'Victoria': ['Melbourne']
            }
          };

          $scope.GetSelectedCountry = function() {
            $scope.strCountry = $scope.countrySrc;
          };
          $scope.GetSelectedState = function() {
            $scope.strState = $scope.stateSrc;
          };
        }
      ])
  </script>
</body>

</html>

希望这个解决方案有所帮助。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angularJS

angularjsngrepeat

angularjsngoptions

根据所选国家，需要填充州和城市 的相关文章

  • 使用 $emit from 指令将事件发送到控制器

    我试图在选择一个项目时发送一个事件 从指令到控制器使用 emit 我有两个针对组织的更新功能 另一个针对人员的更新功能 我的指令应该指定应该发出哪个事件 这是我的更新功能 用于组织 scope updateOrgs function sel

  • AngularJS - 选择单选按钮时触发

    我搜索并尝试了很多 ng xxxx 类型的选项 但找不到那个 我只想在选择单选按钮时调用控制器中的某些功能 所以它可能类似于以下 当然 下面的代码不起作用

  • Kendo Angular 多选设置选定值

    我将 Kendo 多重选择与 Angular Kendo 指令和远程数据源一起使用 我试图在应用程序启动时设置所选项目 但没有成功 谁能帮帮我吗 请参阅此处的代码 JS Bin http jsbin com OkukInIc 1 edit

  • 在 for 循环中突破 Promise 块

    我有以下代码 this storeNameValidate function stores var deferred q defer console log stores for storeIndex in stores this name

  • 如何触发UI-Router View Load事件？

    第一次测试 ui router 但目前测试事件 我似乎无法理解如何触发 viewContentLoaded 或 Loading 虽然 我已经有 stageChangeSuccess 等工作了 我只是把一切都推到了http punkbit c

  • 如何在 AngularJS 中设置选择选项中的文本格式？

    我有以下 json 对象 scope values id 2 code Code 1 name Sample 1 id 4 code Code 2 name Sample 2 id 7 code Code 3 name Sample 3 在

  • JSON 数据的动态表单（不同类型）

    我尝试使用 JSON 中的数据在 AngularJS 中创建动态表单 我有这个工作 HTML p p

  • 在 Angularjs 中格式化输入值

    我正在尝试编写一个指令 自动格式化数字

  • AngularJs 从自身调用内部服务函数

    我构建了一个发出多个请求的简单服务 该服务有两种方法 我无法从服务内的另一种方法调用一种方法 Plunkr http plnkr co edit 2fERik4uTxbxlVOhncMd p preview http plnkr co ed

  • 在 Angular ui-router 中更改状态而不更改浏览器历史记录

    假设我们有这样的逻辑 从状态A改变到状态B 每当我们到达状态 B 时 应用程序总是通过调用将我们重定向到状态 C state go stateC 现在我们处于状态C 我的问题是如何从状态 C 返回状态 A 考虑到状态 A 可以是我们在运行时

  • 为 HTML5 Django Web 应用程序实现实时通知系统

    我目前正在开发一个由 Django apache 提供服务的 HTML5 Web 应用程序 该应用程序的目标是监视多个设备 所有客户端逻辑都是用 Angular 编写的 所有数据都来自对后端进行的基于 JSON 的类似 REST 的调用 我

  • D3.js折线图溢出边距

    我有 d3 js 折线图 它作为 angular js 应用程序的指令包含在内 动态添加的线和 xAxis 以及缩放线上的边距溢出 我必须在图的顶部为每条加载的线创建 Ox 轴 并具有 Ox 和 Oy 单独的缩放可能性 Oy 缩放工作正常

  • 函数调用后的两组括号

    我正在寻找如何filters http docs angularjs org api ng 24filter在 Angularjs 中工作 我发现我们需要发送 2 组括号 filter number number fractionSize

  • 使用最新的不稳定分支生成 Angularjs 应用程序？

    刚开始使用 Yeoman 并喜欢它 但是 我正在构建一个依赖于一些 Angular 1 1 x 功能的应用程序 ng trim and ng animate 并且 Angular generator 使用最新的稳定分支作为默认分支 但不包含

  • getLocationAbsUrl 与 getCurrentUrl

    在量角器中 全球可用browser对象有两个方法 getLocationAbsUrl http angular github io protractor api view Protractor prototype getLocationAb

  • 在 History popstate 事件中获取 AngularJs $scope？

    我是 angularjs 开发新手 我有 var app angular module myapp app controller ProductCtrl scope sce function scope sce scope products

  • Angularjs 模式的复选框表现得很奇怪

    我有一个有角度的应用程序plunker http plnkr co edit rac8w9g8L0eX8mlXKuVn p preview 当我们单击该按钮时 它会打开一个包含项目列表的模式对话框 其中 2 项是根据复选框表输入中的条件进行

  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这

  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e

  • 导航嵌套组件时创建面包屑 (Angular 2)

    我正在为此苦苦挣扎 这个想法是有一个组件 当浏览子视图时更新面包屑 例如

随机推荐

  • 从 Google OpenID 迁移到新的 OAuth 2

    我发现已经有一些关于此的问题 但我发现没有一个涉及任何细节 我之前使用过来自 DotNetOpenAuth 的自己的代码 但现在我决定切换到 Microsoft Wrapper 进行身份验证 无论如何 我发现这个非常好的 OAuth 客户端

  • 如何在 React Router v6 中重定向？

    我正在尝试升级到 React Router v6 react router dom 6 0 1 这是我更新的代码 import BrowserRouter Navigate Route Routes from react router do

  • 如何处理 callableStatement.registerOutParameter(1, java.sql.Types.BOOLEAN);

    Oracle 10g 11g 中有一个存储过程 如下所示 CREATE OR REPLACE PROCEDURE SP SOME PROC PRM ID IN NUMBER START DATE IN DATE RESULT OUT BOO

  • 将输入字段移动到跨度顶部

    我有一个跨度作为我的输入字段的标签 选中后 标签将位于输入字段上方 我的问题是 当您尝试单击输入字段时 标签位于输入字段的 前面 并阻止您选择它 我尝试使用 z 索引修复它 但这似乎不起作用 有人可以帮我将输入字段放在跨度前面吗 input

  • ASP CustomValidator，错误后前进到回发

    我有一个 ASP NET 页面 其中包含 ASP 验证器 必填字段 正则表达式等 以及用于附加验证的 Java 脚本函数 例如 检查第二个日期是否大于第一个日期等 我通常这样做

  • 下载mp3文件并存储在应用程序目录中

    在我的 Android 项目中 我需要以编程方式从 google 驱动器下载网址下载 mp3 文件并将其存储在应用程序沙箱中 然后 应用程序可以有播放选项在本地播放该音频 如何实现从服务器下载 mp3 文件并将其本地存储在应用程序中 稍后

  • 如何使用 SSIS 包中的 Foreach 循环容器选择最近创建的文件夹？

    我在 SSIS 方面遇到了一个有趣的挑战 使用 for each 文件枚举器 我需要选择最近创建的子文件夹 然后迭代每个文件 也许举个例子会更好地解释 这些文件夹看起来像这样 c 数据 2011 0703 c 数据 2011 0626 c

  • Python file.tell 给出错误的值位置

    我正在尝试使用 Python 从现有文件中提取多个位置 这是我当前用于提取位置的代码 self fh open fileName r p re compile regGen regPorSnip begin for line in self

  • 根据屏幕分辨率更改表单的分辨率（不更改显示器分辨率并使用最大化屏幕选项）

    我在论坛上进行了搜索 并尝试了一些方法 但它们似乎并没有真正起作用 让我列出我的问题 我的笔记本电脑的屏幕分辨率非常高 1400x1050 我正在以此为基础设计我的应用程序 我的同事在他的笔记本电脑 分辨率较低 上进行了尝试 但该应用程序不

  • 纸浆得到的结果是问题不可行，而问题不可行

    我正在尝试用纸浆解决作业问题 代码的基本部分如下 set I range 1 numberOfPoints set J range 1 numberOfCentroids tau 0 15 Q 15 decision variable x

  • pip 不会安装 .WHL 文件

    当我尝试通过输入 cmd 从 gohike 安装任何 WHL 时C Users owner Downloads gt pip install TA Lib 0 4 9 cp27 none win amd64 WHL我得到这个打印出来 Pro

  • 调用方法时出错。无法启动 JVM - 本机包将构建但无法启动

    谁能更具体地说明我的问题所在以及如何解决它 我在跑 Windows 7的 Eclipse Mars 2 版本 4 5 2 我已经反复严格按照 Marco 的 code makery ch 教程 code makery ch library

  • 即使设备使用 WiFi，iOS 也会检查蜂窝技术是否可用

    这里需要一些帮助 我需要检测 iOS 设备是否 在某个时刻 具有蜂窝功能 无论是哪一个 我尝试使用可达性类别 但当用户连接到 WiFi 时问题就开始了 因为如果是这样的话 可达性无法检测到蜂窝网络 我也尝试使用这段代码 CTTelephon

  • 了解 jquery 回调

    我很难理解 javascript 回调应该如何工作 我使用以下代码从 MySQL 数据库获取值 post getResults php x 100 y 200 function arrayOfValues alert arrayOfValu

  • PHP 中字符串的每个单词都大写吗？

    据我所知 strtolower 使字符串全部小写 而 ucfirst 使字符串的第一个字母大写 我想问一下 是否可以将字符串中的每个单词都大写 示例 string hello world 如何使其显示为 Hello World 您正在寻找u

  • 带突出显示的 QML 嵌套列表视图

    我需要创建嵌套列表视图 如下所示 并用不同的颜色突出显示主列表和子列表 我尝试过使用 ListView 突出显示 但存在诸如显示子项和父项的突出显示之类的问题 如图所示 下图 我正在使用来自的代码here有一些小的修改 这是完整的代码 im

  • tkinter 在 for 循环中创建可点击标签[重复]

    这个问题在这里已经有答案了 我想在 for 循环中创建多个可点击标签 标签的结构类似于网格 具有 row 和 col 属性 如果我单击标签 则应使用 print it 函数打印单击标签的行和列 问题是 如果我单击任何标签 在这种情况下输出始

  • 在等待输入python时更新turtle/gui

    我正在制作一个聊天程序 但遇到一个问题 屏幕仅在输入后更新 我正在使用turtle来显示聊天 我知道 turtle对于这个目的来说并不是那么好 但它非常简单 这是我循环中的代码 while True ind userlist index u

  • 模拟器上的 Ionic3(Angular4) CORS

    我正在 genymotion 模拟器上测试 Ionic 3 应用程序 顺便说一句 由于 CORS http 请求不起作用 我以为服务器有问题 但我用ionic 2应用程序检查后确认服务器没有问题 Ionic 3 应用程序的 Http 请求在

  • 根据所选国家，需要填充州和城市

    HTML

热门标签