Hoe wijzig ik een in HTML geselecteerde optie met JavaScript?

Ik heb een optiemenu zoals dit:

<form name="AddAndEdit">
   <select name="list" id="personlist">
      <option value="11">Person1</option>
      <option value="27">Person2</option>
      <option value="17">Person3</option>
      <option value="10">Person4</option>
      <option value="7">Person5</option>
      <option value="32">Person6</option>
      <option value="18">Person7</option>
      <option value="29">Person8</option>
      <option value="28">Person9</option>
      <option value="34">Person10</option>
      <option value="12">Person11</option>
      <option value="19">Person12</option>
   </select>
</form>

En nu wil ik de geselecteerde optie wijzigen door een href te gebruiken. Bijvoorbeeld:

<a href="javascript:void(0);"
  onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a>

Maar ik wil de optie selecteren met value=11 (Person1), niet Person12.

Hoe wijzig ik deze code?


Antwoord 1, autoriteit 100%

Wijzigen

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

naar

document.getElementById('personlist').value=Person_ID;

Antwoord 2, autoriteit 23%

Tools als pure JavaScript-code voor het gebruik van Selectbox:

Grafisch begrip:

Afbeelding – A

voer hier de afbeeldingsbeschrijving in


Afbeelding – B

voer hier de afbeeldingsbeschrijving in


Afbeelding – C

voer hier de afbeeldingsbeschrijving in

Bijgewerkt – 25-juni-2019 | Fiddler-DEMO

JavaScript-code:

/**
 * Empty Select Box
 * @param eid Element ID
 * @param value text
 * @param text text
 * @author Neeraj.Singh
 */
function emptySelectBoxById(eid, value, text) {
    document.getElementById(eid).innerHTML = "<option value='" + value + "'>" + text + "</option>";
}
/**
 * Reset Select Box
 * @param eid Element ID
 */
function resetSelectBoxById(eid) {
    document.getElementById(eid).options[0].selected = 'selected';
}
/**
 * Set Select Box Selection By Index
 * @param eid Element ID
 * @param eindx Element Index
 */
function setSelectBoxByIndex(eid, eindx) {
    document.getElementById(eid).getElementsByTagName('option')[eindx].selected = 'selected';
    //or
    document.getElementById(eid).options[eindx].selected = 'selected';
}
/**
 * Set Select Box Selection By Value
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByValue(eid, eval) {
    document.getElementById(eid).value = eval;
}
/**
 * Set Select Box Selection By Text
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByText(eid, etxt) {
    var eid = document.getElementById(eid);
    for (var i = 0; i < eid.options.length; ++i) {
        if (eid.options[i].text === etxt)
            eid.options[i].selected = true;
    }
}
/**
 * Get Select Box Text By ID
 * @param eid Element ID
 * @return string
 */
function getSelectBoxText(eid) {
    return document.getElementById(eid).options[document.getElementById(eid).selectedIndex].text;
}
/**
 * Get Select Box Value By ID
 * @param eid Element ID
 * @return string
 */
function getSelectBoxValue(id) {
    return document.getElementById(id).options[document.getElementById(id).selectedIndex].value;
}

Antwoord 3, autoriteit 13%

Ik geloof dat de blogpost JavaScript-beginners Selecteer een dropdown-optie op waarde kan u helpen.

<a href="javascript:void(0);" onclick="selectItemByValue(document.getElementById('personlist'),11)">change</a>
function selectItemByValue(elmnt, value){
  for(var i=0; i < elmnt.options.length; i++)
  {
    if(elmnt.options[i].value === value) {
      elmnt.selectedIndex = i;
      break;
    }
  }
}

Antwoord 4, autoriteit 11%

mySelect.value = myValue;

Waar mySelect uw selectievak is en myValue de waarde is waarnaar u deze wilt wijzigen.


Antwoord 5, autoriteit 10%

U kunt het select.options.selectedIndex DOM-kenmerk ook als volgt wijzigen:

function selectOption(index){ 
  document.getElementById("select_id").options.selectedIndex = index;
}
<p>
<select id="select_id">
  <option selected>first option</option>
  <option>second option</option>
  <option>third option</option>
</select>
</p>
<p>
  <button onclick="selectOption(0);">Select first option</button>
  <button onclick="selectOption(1);">Select second option</button>
  <button onclick="selectOption(2);">Select third option</button>
</p>

Antwoord 6

U kunt ook JQuery gebruiken

$(document).ready(function () {
  $('#personlist').val("10");
}

Antwoord 7

Als u de optie toevoegt met javascript

function AddNewOption(userRoutes, text, id) 
{
    var option = document.createElement("option");
    option.text = text;
    option.value = id;
    option.selected = "selected";
    userdRoutes.add(option);
}

Antwoord 8

Je eigen antwoord was technisch gezien niet onjuist, maar je hebt de index verkeerd aangezien indexen beginnen bij 0, niet 1. Daarom heb je de verkeerde selectie gemaakt.

document.getElementById('personlist').getElementsByTagName('option')[**10**].selected = 'selected';

Uw antwoord is ook een goed antwoord voor gevallen waarin de tags niet helemaal Engels of numeriek zijn.

Als ze bijvoorbeeld Aziatische karakters gebruiken, werken de andere oplossingen die je vertellen om .value() te gebruiken niet altijd en zullen ze gewoon niets doen. Selecteren op tag is een goede manier om de eigenlijke tekst te negeren en op het element zelf te selecteren.


Antwoord 9

Een array-index begint bij 0. Als u value=11 (Person1) wilt, krijgt u deze met positie getElementsByTagName('option')[10].selected.


Antwoord 10

Het is een oud bericht, maar als iemand nog steeds op zoek is naar een oplossing voor dit soort problemen, dan heb ik het volgende bedacht:

<script>
  document.addEventListener("DOMContentLoaded", function(e) {
    document.forms['AddAndEdit'].elements['list'].value = 11;
  });
</script>

Antwoord 11

Opmerking: het tellen van de optie-index begint bij 0. Dat betekent dat de eerste optie op 0 wordt geïndexeerd.

document.querySelector(".add__btn").addEventListener("click", function(){
  var index = 1; /*change option value here*/  document.querySelector(".add__type").options.selectedIndex = index;
  document.querySelector(".add__description").value = "Option Index";
  document.querySelector(".add__value").value = index;
});
<html>
    <div class="add__container">
         <select class="add__type">
            <option value="inc" selected>+</option>
            <option value="exp">-</option>
         </select>
         <input type="text" class="add__description" placeholder="Add description">
         <input type="number" class="add__value" placeholder="Value">
         <button class="add__btn"> Submit </button>
</div>
<h4> Default Option Value will be selected after pressing Submit </h4>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes