如何将组合框更改为文本当我选择其他任何人
问题描述：
我有一个代码列表中的选项在下面的选项。当我选择其他，然后组合框应该转换成文本。我试着用一些脚本中使用的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>
答
代码
- 附加价值属性的改变在以往任何时候用户选择其他每个
<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>
答
或者像这样使用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>
答
尝试
<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();
+0
你如何认为它将检查值，即使没有将值属性设置为选项？ –
答
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
有哪些你到目前为止已经试过？向我们展示一些JavaScript。 –
你到现在为止尝试过什么？数据应该发生什么？它会被提交吗？...？请添加更多的上下文。 –
你可以看看'datalist'这里http://*.com/questions/36681191/editable-combo-box-javascript-and-html –