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

Question

I have one drop down list which has two options

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

When i select the owner, I have to show one text box section

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

When i select the member, I have to show one text box section

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

It is happening at onchange event.

If i not selecting no one, These two text box sections will be hide.

How to make this functionality

Answer 1

you can user ng-show or ng-hide to do this, here is a demonstration,

when ng-model="membertype" is equals to 'owner' it will show the below 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>

when ng-model="membertype" is equals to 'member' it will show the below 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>

divs to show on event change in dropdown

<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

On page load set textbox visibility to none using style

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

OnChange of dropdownlist call the script

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