Динамическое добавление текстового поля ввода с меткой вместо выпадающего меню

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

     }