2016-03-02 14 views
0

我有一个下拉列表,其中有其他选项,当选择其他选项时出现一个新的字段,我们可以输入文本指定其他,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> 

而如何把一个帮助文本,当我们插入时,另一个是即将到来的新的文本框里面的数据将消失选择。

在此先感谢。

+0

使用jQuery是这样的事情更容易为工作 – RRR

回答

0

由于您使用的innerHTML,以前输入的值将被清除,以避免这种情况,可以追加输入元素如下:

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

从选择标签移除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; 
    } 
} 
+0

这应与JS代码来代替? – user5358888

+0

是替换你的js代码。 – cheralathan

3

试试这个它你

<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> 
+0

当我打印或插入数据库时​​,我回显我只看到“其他”,但没有在文本字段中键入的值..请帮助 – user5358888

+0

代码为您工作,当你选择其他选项,在下拉显示输入字段 –