Question

我有一个下拉列表，其他选项在那里，当选择其他选项时会出现一个新字段，我们可以在其中输入指定其他字段的文本，当文本填充时BUt我没有得到填写在字段中的数据只是得到其他

HTML：

<html>
 <head>
  <script type="text/javascript">
   function showfield(name){
   if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
   else document.getElementById('div1').innerHTML='';
    }
  </script>
 </head>
 <body>
  <select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
  <option selected="selected">Please select ...</option>
  <option value="car">car</option>
  <option value="bike">bike</option>
  <option value="Other">Other</option>
  </select>
  <div id="div1"></div>
 </body>
</html>

当我们在新文本框中插入数据时，如何选择其他文本时，如何放置一个帮助文本。

提前致谢。

Answer 1

试试这个为你工作

 <html>
 <head>
  <script type="text/javascript">
   function showfield(name){
    var name=document.getElementById("drop").value;
    if(name=='Other'){
            document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
        }
        else {
                document.getElementById('div1').innerHTML='';
        }
    }
  </script>
 </head>
 <body>
  <select name="drop" id="drop" onchange="showfield()">
  <option selected="selected">Please select ...</option>
  <option value="car">car</option>
  <option value="bike">bike</option>
  <option value="Other">Other</option>
  </select>
  <div id="div1"></div>
 </body>
</html>

Answer 2

从select标记中删除onchange事件。

var select = document.getElementById('drop');

select.addEventListener("change", processEvent, false);

function processEvent() {
  var name = this.value;
  if(name == 'Other') {
    document.getElementById('div1').innerHTML='Other: <input type="text"   name="other" />';
  } else {
     document.getElementById('div1').innerHTML= name;
  }
}

Answer 3

由于您使用的是innerHTML，因此先前输入的值将被清除，为避免这种情况，您可以按如下方式追加输入元素：

var input = document.createElement('input'); 
input.type = "text"; 
input.name="other" 
document.getElelmentById('div1').appendChild(input);

插入下拉字段中的文本未反映

3 个答案: