動態添加輸入文本字段標籤代替降下來菜單

Question

我想更換時，從下拉菜單中選擇某一特定的選項下拉菜單。

這裏是下拉菜單

當過用戶選擇從下拉菜單等，我想更換此下拉菜單，輸入字段 像

我用下面的代碼嘗試，但它沒有了，我用我

<div class="form-group"> 
    <label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label> 
    <div class="col-sm-10"> 
     <select class="selectpicker form-control" id="location" name="location" required="true"> 
      <option value="jaipur" disabled="disabled" selected="selected">Jaipur</option> 
      <option value="shimla">Shimla</option> 
      <option value="bangalore">Bangalore</option> 
      <option value="hyderabad">Hyderabad</option> 
      <option value="mumbai">Mumbai</option> 
      <option value="varansi">Varanasi</option> 
      <option value="dehradun">Dehradun</option> 
      <option value="masoori">Masoori</option> 
      <option value="goa">GOA</option> 
      <option value="udaipur">Udaipur</option> 
      <option value="kokata">Kolkata</option> 
      <option value="agra">Agra</option> 
      <option value="allahabad">Allahabad</option> 
      <option value="amritsar">Amritsar</option> 
      <option value="chandigarh">Chandigarh</option> 
      <option value="chennai">Chennai</option> 
      <option value="lucknow">Lucknow</option> 
      <option value="nanital">Nanital</option> 
      <option value="ludhiana">Ludhiana</option> 
      <option value="patiala">Patiala</option> 
      <option value="others" onclick="addElement();">other</option> 
     </select> 
     <input type="hidden" value="0" id="theValue" /> 
     <div id="myDiv"> </div> 
    </div> 
</div> 

JavaScript的工作是

function addElement() { 
    var ni = document.getElementById('myDiv'); 
    var numi = document.getElementById('theValue'); 
    var num = (document.getElementById('theValue').value -1)+ 2; 
    numi.value = num; 
    var newdiv = document.createElement('div'); 
    var divIdName = 'my'+num+'Div'; 
    newdiv.setAttribute('id',divIdName); 
    newdiv.innerHTML = 'Element Number '+num+' has been added!'; 
    ni.appendChild(newdiv); 
} 

有人能指導我達到預期的目標？

Answer 1

試着用這個。

HTML：

 <div class="form-group"> 
    <label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label> 
    <div class="col-sm-10"> 
     <select class="selectpicker form-control" id="location" onchange="addElement(this.value)" name="location" required="true"> 
     <option value="jaipur" disabled="disabled" selected="selected">Jaipur</option> 
     <option value="shimla">Shimla</option> 
     <option value="bangalore">Bangalore</option> 
     <option value="hyderabad">Hyderabad</option> 
     <option value="others">other</option> 
     </select> 
     <input type="hidden" value="0" id="theValue" /> 
     <div id="myDiv" class="hide"><input type="text"> </div> 
    </div> 
</div> 

JQuery的：

function addElement(value) 
{ 
    if(value == 'others') 
    { 
    $('#location').addClass('hide'); 
    $('#myDiv').addClass('show'); 
    } 
} 

CSS：

.hide 
{ 
display : none 
} 
.show 
{ 
display : block 
} 

Answer 2

你得到任何控制檯錯誤（F12）？因爲你在代碼中缺少''。

function addElement() { 

      var ni = document.getElementById('myDiv'); 

      var numi = document.getElementById('theValue'); 

      var num = (document.getElementById('theValue').value -1)+ 2; 

      numi.value = num; 

      var newdiv = document.createElement('div'); 

      var divIdName = 'my'+num+'Div'; 

      newdiv.setAttribute('id',divIdName); 

      newdiv.innerHTML = 'Element Number '+num+' has been added!'; 

      ni.appendChild(newdiv); 

     }