如何將組合框更改爲文本當我選擇其他任何人

我有一個代碼列表中的選項在下面的選項。當我選擇其他，然後組合框應該轉換成文本。我試着用一些腳本中使用的onchange溫控功能如何將組合框更改爲文本當我選擇其他任何人

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>

來源

2017-02-28 Jsel

有哪些你到目前爲止已經試過？向我們展示一些JavaScript。 –

你到現在爲止嘗試過什麼？數據應該發生什麼？它會被提交嗎？...？請添加更多的上下文。 –

你可以看看'datalist'這裏http://stackoverflow.com/questions/36681191/editable-combo-box-javascript-and-html –

附加價值屬性的改變在以往任何時候用戶選擇其他每個<option>標籤
selectonchange，檢查如果是其他（本例中爲s5），則選擇
的值，使用replacechild

[[編輯]按OP的評論]
你可以通過this到function確定哪些元素被改變，也爲代碼重用（適用於所有類似的行爲，一個代碼）。
我們需要應用到新的input的id取自函數定義中的this關鍵字。在每個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

見下

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>

代碼

來源

2017-02-28 11:30:31

謝謝。有用！但如果我有3組以上選擇在一個單一的行，如果用戶選擇其他任何人，它應該進入文本框。但在這種情況下，只有一個我可以得到。 – Jsel

請稍候。一旦我到達我的辦公室，我會解決問題。現在我正在路上。 –

可以請你分享你的想法 – Jsel

或者像這樣使用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>

來源

2017-02-28 11:33:53 dfsq

嘗試

<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

來源

2017-02-28 11:39:34

你如何認爲它將檢查值，即使沒有將值屬性設置爲選項？ –

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

來源

2017-02-28 12:50:01

如何將組合框更改爲文本當我選擇其他任何人​​

回答

相關問題

如何將組合框更改爲文本當我選擇其他任何人