更新选择列表中的现有选项

Question

假设我有一个包含 3 个选项的选择列表：

  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

现在，我想更新这些选项之一，所以我创建了文本字段和按钮。每次我按下选择列表中的选项之一时，该选项都会出现在文本字段内。有人可以指导我我需要做什么吗？

谢谢

Answer 1

加上我们今天早上jsfiddle的第一个例子

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;
}

基本上，我添加了一个编辑字段，单击该字段时，它将编辑当前选定选项的值和文本，当您选择一个新选项时，它将使用当前选定的选项传播文本字段，以便您可以对其进行编辑。此外，我还添加了一个删除功能，因为我认为您将来可能需要它。