Как получить шоу текстового поля, когда изменить выпадающий список

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

OnChange из DropDownList вызова скрипта

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