動態添加帶有標簽的輸入文本字段代替下拉菜單

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>

查詢：

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

        }