首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何仅在选择某个<select>下拉选项时才显示<div>?使用ng- <select>指令填充重复选项

如何仅在选择某个<select>下拉选项时才显示<div>?使用ng- <select>指令填充重复选项
EN

Stack Overflow用户
提问于 2019-04-16 00:43:15
回答 3查看 77关注 0票数 0

我有一个用angularjs ng-repeat指令填充的select下拉列表。我希望仅当选择某个选项时才显示div

代码如下:

代码语言:javascript
复制
<select type="text"
  class="form-control"
  ng-model="vm.request.requestType"  
  name="requestType" id="requestType"
  placeholder=""
  required>
   <option selected></option>
   <option value="test">test</option>
   <option ng-repeat="requestType in vm.requestTypes">{{requestType}}</option>
</select>

<script>
    $(function() {
      $("#requestType").change(function () {
        if ($("#test").is(":selected")) {
          $("#continueCheckbox").show();
        } else {
          $("#continueCheckbox").hide();
        }
      }).trigger('change');
    });
</script>

<div id="continueCheckbox">
  <input type="checkbox"
     name="continueCheckbox"
     value="continueCheckbox">
     Check this box to continue, and to confirm that you have read the 
     Documentation
</div>

"test“选项只是用来测试函数是否正常工作。当前,无论选择什么,复选框都会显示,并且永远不会消失。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-04-16 00:52:19

我强烈建议不要混用AngularJS和jQuery。两者都是DOM操作框架,不能很好地协同工作。这里有一种你可以用AngularJS实现你想要的东西的方法:

代码语言:javascript
复制
<div id="continueCheckbox" ng-if="vm.request.requestType === 'test'">
    <input type="checkbox"
           name="continueCheckbox"
           value="continueCheckbox">
        Check this box to continue, and to confirm that you have read the Documentation
</div>
票数 1
EN

Stack Overflow用户

发布于 2019-04-16 00:50:59

您是否尝试过使用ng-class指令?

代码语言:javascript
复制
<div id="continueCheckbox" ng-class="selected: vim.request.requestType === 'test'"></div>

然后在.css文件中处理样式

代码语言:javascript
复制
.selected {
  display: none;
}
票数 0
EN

Stack Overflow用户

发布于 2019-04-16 03:32:36

如果你想使用jQuery,你可以只检查select的值。您已经将其设置好了。

代码语言:javascript
复制
var selectType=$(this).val();
if (selectType=="test") // instead of if ($("#test").is(":selected")) 

您也可以使用普通的JS和.value来进行比较。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55693791

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档