コンボボックスをテキストに変更する方法​​の他を選択した場合

Question

私は下記のオプションのリストにあるコードを持っています。私が他を選択すると、コンボボックスはテキストに変換されます。私はのonchange fucntion

function chargeother(ele){ 
 
    \t if(ele.value === "Other"){ 
 
    \t \t alert("i am inside other"); 
 
     \t document.getElementById("inputtype").innerHTML = "<input type=\"text\" name=\"type\">"; 
 
    }  
 
}

を使用して、いくつかのスクリプトを使用してみました。しかし、その変更だけが、私が今までユーザーが

<tr> 
 
<td> 
 
    \t \t <select name="inp" id="inp" > 
 
    \t \t <option name="S1">YES</option> 
 
    \t \t <option name="S2">NO</option> 
 
    \t \t <option name="S3">OK</option> 
 
    \t \t <option name="S4">NOT OK</option> 
 
     <option name="S5">Other</option> 
 
    \t \t </select> 
 
</td> 
 
<td> 
 
    \t \t <select name="inp" id="inp" > 
 
    \t \t <option name="S1">YES</option> 
 
    \t \t <option name="S2">NO</option> 
 
    \t \t <option name="S3">OK</option> 
 
    \t \t <option name="S4">NOT OK</option> 
 
     <option name="S5">Other</option> 
 
    \t \t </select> 
 
</td> 
 
<td> 
 
    \t \t <select name="inp" id="inp" > 
 
    \t \t <option name="S1">YES</option> 
 
    \t \t <option name="S2">NO</option> 
 
    \t \t <option name="S3">OK</option> 
 
    \t \t <option name="S4">NOT OK</option> 
 
     <option name="S5">Other</option> 
 
    \t \t </select> 
 
</td> 
 
</tr>

Answer 1

• のいずれかに他を選択する場所に変更したいと思いますが、各<option>タグ
• selectonchange、チェックにvalue属性を追加します
• 他の場合（この場合はs5）、replacechildを使用してください。

[OPさんのコメントどおり[EDIT]]は
あなたはコードの再利用（すべての類似した行動のための1つのコード）のためにも、変更された要素を識別するためにthisfunctionに渡すことができます。
新しいinputに適用する必要があるidは、関数定義のthisキーワードから取得しています。 は

function check(elm){ 
 
    if(elm.value=="s5"){ 
 
    var inp=document.createElement('input'); 
 
     inp.setAttribute('type','text'); 
 
     inp.setAttribute('id',elm.getAttribute('id')); 
 
     inp.setAttribute('name','inp'); 
 
    elm.parentNode.replaceChild(inp,elm); 
 
    } 
 
}

<td> 
 
<select name="inp" id="inp" onchange="check(this);"> 
 
\t \t <option value='s1' name="S1">YES</option> 
 
\t \t <option value='s2' name="S2">NO</option> 
 
\t \t <option value='s3' name="S3">OK</option> 
 
\t \t <option value='s4' name="S4">NOT OK</option> 
 
    <option value='s5' name="S5">Other</option> 
 
\t \t </select> 
 
    <select name="inp" id="inp2" onchange="check(this);"> 
 
\t \t <option value='s1' name="S1">YES</option> 
 
\t \t <option value='s2' name="S2">NO</option> 
 
\t \t <option value='s3' name="S3">OK</option> 
 
\t \t <option value='s4' name="S4">NOT OK</option> 
 
    <option value='s5' name="S5">Other</option> 
 
\t \t </select> 
 
    <select name="inp" id="inp3" onchange="check(this);"> 
 
\t \t <option value='s1' name="S1">YES</option> 
 
\t \t <option value='s2' name="S2">NO</option> 
 
\t \t <option value='s3' name="S3">OK</option> 
 
\t \t <option value='s4' name="S4">NOT OK</option> 
 
    <option value='s5' name="S5">Other</option> 
 
\t \t </select> 
 
    </td>

以下のコードを参照してください、私が行ったように、各 selectタグでは、

onchange="check(this);" 

下のコードに次の属性を追加し、function定義で、

function check(elm){ // elm holds the changed select tag 
elm.value // will return the value of currently changed element 
elm.getAttribute('id') // will return the id of the current attribute, which we use later to apply to input 

を使用します

Answer 2

それともjQueryを使って、このような何か：

$('#inp').change(function() { 
 
    if (this.value === 'S5') { 
 
    $(this).replaceWith('<input name="inp" type="text">') 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="inp" id="inp"> 
 
    <option value="S1">YES</option> 
 
    <option value="S2">NO</option> 
 
    <option value="S3">OK</option> 
 
    <option value="S4">NOT OK</option> 
 
    <option value="S5">Other</option> 
 
</select>

または純粋なJSでも簡単：

document.querySelector('#inp').addEventListener('change', function() { 
 
    if (this.value === 'S5') { 
 
    this.insertAdjacentHTML('afterend', '<input type="text" name="inp">') 
 
    this.parentNode.removeChild(this) 
 
    } 
 
})

<select name="inp" id="inp"> 
 
    <option value="S1">YES</option> 
 
    <option value="S2">NO</option> 
 
    <option value="S3">OK</option> 
 
    <option value="S4">NOT OK</option> 
 
    <option value="S5">Other</option> 
 
</select>

Answer 3

が

をお試しください

<select name="inp" id="inp" > 
     <option value="S1">YES</option> 
     <option value="S2">NO</option> 
     <option value="S3">OK</option> 
     <option value="S4">NOT OK</option> 
    <option value="S5">Other</option> 
</select> 
<input id='box' type="text" /> 

$("#inp") 
    .change(function() { 
    $("#inp option:selected").each(function() { 
     if($(this).text() == "Other"){ 
      $("#box").show(); 
      $('#inp').hide() 
     }else{ 
     $("#box").hide(); 
     } 
    }); 
    }) 
    .change(); 

jsfiddle

Answer 4

1. Instead of creating a new tag element 
2. we can just replace the existing select tag to input tag 
3. Pros of using this method will reduce the script. 

Refer this [plunker][1] for further information. 


    [1]: https://plnkr.co/edit/2ZztfpmvAhJZMQGtgZPw?p=preview