动态添加带有标签的输入文本字段代替下拉菜单

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

        }