Question

我有一个下拉列表，其中有两个选项

<div class="form-group">
          <span class="col-sm-4 control-span">Member Type</span>
          <div class="col-sm-8">
            <select class="form-control" id="membertype" name="membertype" ng-model="membertype">
              <option value="">-- Select Member Type --</option>
              <option value="owner">Owner</option>
              <option value="member">Member</option>
            </select>
          </div>
        </div>

当我选择所有者时，我必须显示一个文本框部分

<div class="form-group">
          <span class="col-sm-4 control-span">Your Membership Number</span>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
          </div>
        </div>

当我选择会员时，我必须显示一个文本框部分

<div class="form-group">
          <span class="col-sm-4 control-span">Owner Membership Number</span>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
          </div>
        </div>

正在onchange事件中发生。

如果我没有选择任何人，则会隐藏这两个文本框部分。

如何制作此功能

Answer 1

您可以使用ng-show或ng-hide来执行此操作，此处是演示，

当ng-model="membertype"等于'owner'时，它会显示以下div;

<div class="form-group" ng-show="(membertype == 'owner')">
      <span class="col-sm-4 control-span">Your Membership Number</span>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="membernumber" name="membernumber"    placeholder="Membership Number">
      </div>
    </div>

当ng-model="membertype"等于'member'时，它会显示以下div;

<div class="form-group" ng-show="(membertype == 'member')">
      <span class="col-sm-4 control-span">Owner Membership Number</span>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
      </div>
    </div>

Answer 2

<div class="form-group">
      <span class="col-sm-4 control-span">Member Type</span>
      <div class="col-sm-8">
        <select class="form-control" id="membertype" name="membertype" ng-model="membertype">
          <option value="">-- Select Member Type --</option>
          <option value="owner">Owner</option>
          <option value="member">Member</option>
        </select>
      </div>
    </div>

<div class="form-group" ng-show="membertype == 'member'">
      <span class="col-sm-4 control-span">Your Membership Number</span>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="membernumber" name="membernumber"    placeholder="Membership Number">
      </div>
    </div>

在下拉列表中显示事件更改的div

<div class="form-group" ng-if="membertype  == 'owner'">
          <span class="col-sm-4 control-span">Owner Membership Number</span>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
          </div>
        </div>

Answer 3

在页面加载时，将文本框可见性设置为无使用样式

<div class="col-sm-8">
        <input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number" style="display:none" >
      </div>

dropdownlist的OnChange调用脚本

<script>
yourfunction(value)
{           
        if(value === "owner")
         {
           document.getElementById("ownernumber").style.display="block";
         }
}
</script>

如何获取显示文本框，更改下拉列表时

3 个答案: