假设我有一个包含 3 个选项的选择列表:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
现在,我想更新这些选项之一,因此我创建文本字段和按钮。
每当我按下选择列表中的选项之一时,该选项就会出现在文本字段内。
有人可以指导我需要做什么吗?
thanks
加上我们今天早上的第一个例子jsfiddle http://jsfiddle.net/kjy112/T8znS/
HTML:
<select id='myselect'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<input type='text' value='1' name='mytext' id='mytext' />
<button value='add' id='addbtn' name='addbtn'>add</button>
<button value='edit' id='editbtn' name='editbtn'>edit</button>
<button value='delete' id='deletebtn' name='deletebtn'>delete</button>
JavaScript:
var myselect = document.getElementById('myselect');
function createOption() {
var currentText = document.getElementById('mytext').value;
var objOption = document.createElement("option");
objOption.text = currentText;
objOption.value = currentText;
//myselect.add(objOption);
myselect.options.add(objOption);
}
function editOption() {
myselect.options[myselect.selectedIndex].text = document.getElementById('mytext').value;
myselect.options[myselect.selectedIndex].value = document.getElementById('mytext').value;
}
function deleteOption() {
myselect.options[myselect.selectedIndex] = null;
if (myselect.options.length == 0) document.getElementById('mytext').value = '';
else document.getElementById('mytext').value = myselect.options[myselect.selectedIndex].text;
}
document.getElementById('addbtn').onclick = createOption;
document.getElementById('editbtn').onclick = editOption;
document.getElementById('deletebtn').onclick = deleteOption;
myselect.onchange = function() {
document.getElementById('mytext').value = myselect.value;
}
基本上,我添加了一个编辑字段,单击该字段时,它将编辑当前选定选项的值和文本,当您选择新选项时,它将使用当前选定的选项传播文本字段,以便您可以对其进行编辑。此外,我还添加了删除功能,因为我认为您将来可能需要它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)