Question

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

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

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

感谢

Answer 1

使用jquery :selected选择器和val()方法。

$('select:selected').val($('input_textbox').val());

Answer 2

添加到我们今天早上的第一个示例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;
}

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

Answer 3

首先，始终为输入标签提供ID。例如，在这种情况下，您可以执行以下操作：<select id='myDropDown'>

一旦你有了ID，就可以轻松地从文本框中获取新值并将其插入下拉列表中：

例如：

// Lets assume the textbox is called 'myTextBox'
// grab the value in the textbox
 var textboxValue = document.getElementById('myTextBox').value;

// Create a new DOM element to be inserted into Select tag
 var newOption = document.createElement('option');
 newOption.text = textboxValue;
 newOption.value = textboxValue;

// get handle to the dropdown
 var dropDown = document.getElementById('myDropDown');

// insert the new option tag into the dropdown.
 try {
   dropDown.add(newOption, null); // standards compliant; doesn't work in some versions of IE
 }
 catch(ex) {
   dropDown.add(newOption); // IE only
 }

Answer 4

下面是使用标记的纯js示例。

修改在重新阅读您的问题后，我不确定您是否希望在用户单击按钮时更新选项。要将选项放入输入中，您可以执行此操作。

var select = document.getElementsByTagName("select")[0], input = document.getElementById("inputEl"); select.onchange = function(){ input.value = this[this.selectedIndex].text; }

更新用户输入内容的选项。

http://jsfiddle.net/loktar/24cHN/6/

<强>标记

<select> <option>1</option> <option>2</option> <option>3</option> </select> <br/> <input type="text" id="inputEl"/> <button id="button">Update</button>

<强>的Javascript

var select = document.getElementsByTagName("select")[0], input = document.getElementById("inputEl"), button = document.getElementById("button"); select.onchange = function(){ input.value = this[this.selectedIndex].text; var selected = this, selectedIndex = this.selectedIndex; button.onclick = function(){ selected[selectedIndex].text = input.value; } }

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

4 个答案: