选择引导输入区域时会出现下拉div

Question

我试图在您点击输入文本区域时显示一个下拉框，显示更多框（即信息完成）。 这是我基于我的设计的线框的链接： https://drive.google.com/file/d/0BxNRMs44yAigWmRneC1GTUZheGs/view?usp=sharing

到目前为止，我已经使用过Bootstrap，似乎无法成功添加下拉列表，并希望得到任何帮助/指导。

<div id="popup3" class="popup">                
    <h3>Add your locations here</h2>
    <form role="form">
    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address"/>
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>    

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="form-group">
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
     </div>
    </form>

 </div>

 <div id="popup4" class="popup">    
   <h3>Choose the categories that best define your drift</h3>
   <form role="form">
   <select multiple class="form-control" id="sel">
      <option>Art</option>
      <option>Entertainment</option>
      <option>History</option>
      <option>Landmarks</option>
      <option>Music</option>
      <option>Nature</option>
      <option>Oddities</option>
    </select>
    </form>
</div>

这是我的css：

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }