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

How to get show text box, When change the dropdown list

本文关键字：下拉列表 文本 显示 何获取 获取      更新时间：2023-09-26

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

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

它发生在变化事件中。

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

如何制作此功能

你可以用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>

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

使用样式将文本框可见性设置为无

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

更改下拉列表调用脚本 

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