Question

情况我有一个表单，用户可以从选择框中的几个选项中进行选择。

当用户选择＆＃39;其他＆＃39;我想选择框以转换为输入框。

这是我的代码。

头

<script>
function chargeother(select) {
if (select=="other") {
document.getElementById('chargeother').innerHTML= '<input type="text" name="type">';
} 
}
</script>

车身首选框

<td id="inputtype">
<select type="text" name="type"  onchange="chargeother(this.value)">
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>

第二个选择框

<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this.value)">
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>

我在页面上需要两次这个功能才能添加一个＆＃39; id＆＃39;进入onchange函数调用

Answer 1

您需要在HTML中为<table>指定<tr>和<td>标记，并在元素上使用innerHTML，并确保注释掉属性值的双引号< / p>

// CODE

<!DOCTYPE html>
<html>
<head>
    <script>
    function chargeother(ele){
        switch(ele.parentNode.id){
            case "inputtype":
                if(ele.value === "other"){
                    document.getElementById("inputtype").innerHTML = "<input type=\"text\" name=\"type\">";
                }
                break;
            case "inputhazard":
                if(ele.value === "other"){
                    document.getElementById("inputhazard").innerHTML = "<input type=\"text\" name=\"type\">";
                }
                break;
        }           
    }
    </script>
</head>
<body>
    <table>
    <tr>
        <td id="inputtype">
            <select type="text" name="type"  onchange="chargeother(this)">
                <option value="Labour and Material">Labour and Material</option>
                <option value="Quoted">Quoted</option>
                <option value="Labour Only">Labour Only</option>
                <option value="Material Only">Material Only</option>
                <option value="other">Other</option>
            </select>
        </td>
        <td id="inputhazard">
            <select type="text" name="hazard"  onchange="chargeother(this)">
                <option value="No Significant Hazard">No Significant Hazard</option>
                <option value="GC43 Attached">GC43 Attached</option>
                <option value="other">Other</option>
            </select>
        </td>       
    </tr>
    </table>
</body>
</html>

Answer 2

你可以这样做：

  function chargeother ( select ) {
   if (select == "other")
   {
        var elem = document.getElementById(" selectId ");
        elem.parentElement.removeChild (elem);
        var inputElem= document.createElement ('input');
        inputElem. type='text';
        document.getElementById (" chargeother").appendChild(inputElem);
   }
}

Answer 3

尝试此示例时没有目标ID：

＆＃13;

var chargeother = function(el) { // note, its html element
  if ('other' !== el.value) return;
  el.parentNode.innerHTML = "<input type='text' name='" + el.name + "'/>";
};

＆＃13;

<table>
  <tr>
    <td id="inputtype">
      <select type="text" name="type" onchange="chargeother(this)"><!-- not just value -->
        <option value="Labour and Material">Labour and Material</option>
        <option value="Quoted">Quoted</option>
        <option value="Labour Only">Labour Only</option>
        <option value="Material Only">Material Only</option>
        <option value="other">Other</option>
      </select>
    </td>
    <td id="inputhazard">
      <select type="text" name="hazard" onchange="chargeother(this)"><!-- not just value -->
        <option value="No Significant Hazard">No Significant Hazard</option>
        <option value="GC43 Attached">GC43 Attached</option>
        <option value="other">Other</option>
      </select>
    </td>
  </tr>
</table>

＆＃13;

使用javascript将selectbox转换为输入

3 个答案: