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

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

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

您的会员号码

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

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

业主会员编号

这是在一次变革活动中发生的

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

---

如何实现此功能

您可以使用

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>

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

成员类型
--选择成员类型--
所有者
成员
您的会员号码

下拉列表中要在事件更改时显示的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>

业主会员编号

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

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

一旦更改dropdownlist，调用脚本

你的功能（价值）
{           
如果（值=“所有者”）
{
document.getElementById（“ownernumber”）.style.display=“block”；
}
}