aktualisieren Sie vorhandene option in select-Liste

Lassen Sie uns sagen, dass ich eine select-Liste mit 3 Optionen innen:

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

Nun, ich möchte zu aktualisieren, eine der folgenden Optionen, also ich erstelle textfield - & - Taste.
Die option innerhalb der textfield-jedesmal, wenn ich drücken Sie auf eine der Optionen in der select-Liste.
Kann jemand mir direkt was muss ich tun?

Dank

InformationsquelleAutor firestruq | 2011-02-23

  1. 2

    Addieren, um das erste Beispiel, das wir hatten heute morgen 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;
}

    Im Grunde fügte ich ein edit-Feld, das, wenn geklickt, es wird ändern Sie den Wert und text der aktuell ausgewählten option, und wenn Sie eine neue option auswählen, es werde propagieren das Textfeld mit der aktuell ausgewählten option, so dass Sie es Bearbeiten können. Zusätzlich habe ich auch noch einen "delete" - Funktion, da ich vermute, Sie könnte es brauchen in der Zukunft.

    und wieder... 🙂

    InformationsquelleAutor KJYe.Name

  2. 2

    Jquery :ausgewählt Selektor und val() Methode.

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

    InformationsquelleAutor gor

  3. 2

    Zunächst immer eine ID, um Ihre input-tags. Für z.B. in diesem Fall können Sie etwas tun: <select id='myDropDown'>

    Sobald Sie die ID ' s an Stelle dessen einfach eine Frage der Kommissionierung bis der neue Wert aus der textbox und fügen Sie Sie in der dropdown -:

    ZB: 

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

    InformationsquelleAutor sharmaprateek

  4. 1

    Unten ist eine Reine js-Beispiel für die Verwendung von markup.

    BEARBEITEN
    Nach Wiederlesen deine Frage Im nicht sicher, wenn Sie wollten, dass die option zum aktualisieren, wenn ein Benutzer auf die Schaltfläche oder nicht.., nur die Möglichkeit, in einen Eingang, können Sie dies tun.

    var select = document.getElementsByTagName("select")[0],
    input = document.getElementById("inputEl");

select.onchange = function(){
     input.value = this[this.selectedIndex].text;
}

    Zur Aktualisierung die option zu, was der Benutzer eingegeben in ist unten.

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

    Markup

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

    InformationsquelleAutor Loktar

Schreibe einen Kommentar