我想要一个网页的结构如下:应该有2个下拉菜单,其中第二个下拉菜单取决于第一个下拉菜单(请参见下文)。另外,应该有一个div部分,根据两个下拉菜单中的输入显示一些内容。

例如:

下拉菜单1:可用选项为“ A”和“ B”

下拉菜单2:可用的选项是


如果在下拉菜单1中选择了“ A”,则可用选项为“ DC”和“ NY”
如果在下拉菜单1中选择了“ B”,则可用选项为“ B_DC”和“ B_NY”


现在,取决于下拉菜单中的输入,在div部分中应该显示某种输出(取决于输入)。例如,如果选择了“ B”和“ B_NY”,则div部分可能包含消息“选择了选项“ B”和“ B_NY””。或者,例如,如果选择了“ A”和“ DC”,则div部分可能包含一个按钮(我选择此示例只是为了强调在这种情况下,内容通常不只是文本)。

注意:
stackoverflow上已经有一个非常相似的示例:

http://stackoverflow.com/questions/26389562/angular-show-div-content-depending-on-which-option-chosen-from-drop-down-menu/26389852#26389852


这个问题与我上面的问题相同(我也相应地选择了示例)-唯一的区别是只有一个下拉菜单,而不是两个。在Plunker上也可以找到该线程中提供的解决方案:

http://plnkr.co/edit/ziaxHOj53J6sePf6y6Qf?p=preview


我希望这个问题对希望帮助我解决我的问题的每个人来说都容易得多。

先感谢您!

最佳答案

举个例子:

<select class="form-control" ng-model="places1">
  <option>Choose Place</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>
<select class="form-control" ng-model="places2">
  <option>Choose Place</option>
  <option value="DC" ng-if="places1 == 'A'">DC</option>
  <option value="NY" ng-if="places1 == 'A'">NY</option>
  <option value="B_DC" ng-if="places1 == 'B'">B_DC</option>
  <option value="B_NY" ng-if="places1 == 'B'">B_NY</option>
</select>

<div ng-if="places1 == 'A' && places2 == 'DC'">A => DC</div>
<div ng-if="places1 == 'A' && places2 == 'NY'">A => NY</div>
<div ng-if="places1 == 'B' && places2 == 'B_DC'">B => B_DC</div>
<div ng-if="places1 == 'B' && places2 == 'B_NY'">B => B_NY</div>


工作示例:http://plnkr.co/edit/dx3A2GuymtswwEdJHotW?p=preview

关于javascript - Angular :根据2级下拉菜单显示div内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37174100/

10-12 12:40
查看更多