Question

我需要你的帮助。

我在下面有以下代码，如果在输入框中输入后只有一个值添加到选择框中（因此，使其成为可编辑的选择框），那么该代码可以正常工作，然后输入另一个值在输入框中，选择框的内容将更改为新输入的值。

我想修改下面的代码，以便允许将其他类型的值添加到选择框中。

<html> 

<style> 

#list { 
    left: expression(this.previousSibling.offsetLeft); 
    width: expression(this.previousSibling.offsetWidth);  
    clip: expression("rect(2px auto 20px " + (this.previousSibling.offsetWidth - 20) + "px)"); 
    overflow: hidden;
    position: absolute;
    top: -1px;
    font-size: 9pt;
    font-family: Arial;
}
#wrapper {
    border: 1px solid blue;
    display: block;
    position: relative;
    width: 180px;
    height: 20px;
}
#text1 {
    border: 0;
    height: 18px;
    width: 180px;
    position: relative;
    font-size: 9pt;
    font-family: Arial;
    padding: 2px;
}
</style> 

<script language="javascript"> 
function getval() {
var select = document.getElementById('list')

    document.getElementById('text1').value = select.options[select.selectedIndex].text

}//end of function

var oNewOption = null;

function AddListItem(oInput) {

var oSelect = oInput.nextSibling;

if (oNewOption == null) {
oNewOption = document.createElement("OPTION");
oSelect.options.add(oNewOption);
}

oNewOption.text = oInput.value;
oNewOption.value = oInput.value;

}

</script> 
<body> 

<div id="wrapper">
<input id="text1" type="text" onkeyup="AddListItem(this)"><select id="list" onchange="getval()"> 
</select>
</div>

</body> 
</html>

Answer 1

为了做到这一点，我不得不将onkeyup更改为onchange。因此，只有在输入元素失去焦点后才会添加该选项。

<html> 

<style> 

#list { 
    left: expression(this.previousSibling.offsetLeft); 
    width: expression(this.previousSibling.offsetWidth);  
    clip: expression("rect(2px auto 20px " + (this.previousSibling.offsetWidth - 20) + "px)"); 
    overflow: hidden;
    position: absolute;
    top: -1px;
    font-size: 9pt;
    font-family: Arial;
}
#wrapper {
    border: 1px solid blue;
    display: block;
    position: relative;
    width: 180px;
    height: 20px;
}
#text1 {
    border: 0;
    height: 18px;
    width: 180px;
    position: relative;
    font-size: 9pt;
    font-family: Arial;
    padding: 2px;
}
</style> 

<script language="javascript"> 
function getval() {
var select = document.getElementById('list')

    document.getElementById('text1').value = select.options[select.selectedIndex].text

}//end of function

var oNewOption = null;

function AddListItem(oInput) {

var oSelect = oInput.nextSibling;


oNewOption = document.createElement("OPTION");
oSelect.options.add(oNewOption);


oNewOption.text = oInput.value;
oNewOption.value = oInput.value;
oNewOption.selected = true;

}

</script> 
<body> 

<div id="wrapper">
<input id="text1" type="text" onchange="AddListItem(this)"><select id="list" onchange="getval()"> 
</select>
</div>

</body> 
</html>

在输入框中键入选项框后，将其他选项值添加到选择框中

1 个答案: