更新选择列表中的现有选项 [英] update existing option in select list

问题描述

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

现在，我想更新其中一个选项，所以我创建了textfield&按钮。
每当我按下选择列表中的一个选项时，该选项就出现在文本框内。
有人可以指导我，我需要做什么？

谢谢

解决方案

加入我们今天早上的第一个例子 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'）; 
 
函数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; 
} 
  

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

Let's say that I have select list with 3 options inside:

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

Now, I want to update one of these options, so i create textfield & button. The option appear inside the textfield everytime i press on one of the options at the select list. Can someone direct me what do i need to do?

thanks

解决方案

Adding up to the first example that we had this morning 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;
}

Basically i added an edit field that when clicked it'll edit the value and text of the currently selected option, and when you select a new option it'll propogate the textfield with the currently selected option so you can edit it. Additionally, i also added a delete function since i figure you might need it in the future.

这篇关于更新选择列表中的现有选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！