Как изменить параметр HTML, выбранный с помощью JavaScript?

У меня есть меню опций, как это:

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

И теперь я хочу изменить выбранную опцию, используя ссылку. Например:

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

Но я хочу выбрать вариант value=11 (Person1), а не Person12.

Как мне изменить этот код?

+ Изменить

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

в

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

Инструменты как чистый код JavaScript для обработки Selectbox:

Графическое понимание:

Изображение - А

Изображение - B

Изображение - C

Обновлено - 25 июня 2019 года | Скрипач ДЕМО

Код JavaScript:

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

Я считаю, что пост в блоге JavaScript Beginners - может помочь вам выбрать опцию раскрывающегося списка по значению .

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

Вы также можете изменить атрибут DOM select.options.selectedIndex следующим образом:

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>

mySelect.value = myValue;

Где mySelectнаходится поле выбора, и myValueкакое значение вы хотите изменить.

Индекс массива будет начинаться с 0. Если вы хотите значение = 11 (Person1), вы получите его с позицией getElementsByTagName('option')[10].selected.

Вы также можете использовать JQuery

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

Если вы добавляете опцию с помощью JavaScript

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

Это старый пост, но если кто-то все еще ищет решение этой проблемы, вот что я придумал:

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

Технически ваш собственный ответ не был неправильным, но вы ошиблись в индексе, поскольку индексы начинаются с 0, а не с 1. Поэтому вы ошиблись в выборе.

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

Кроме того, ваш ответ на самом деле хорош для случаев, когда теги не полностью английские или числовые.

Если они используют, например, азиатские символы, другие решения, предлагающие использовать .value (), могут не всегда работать и просто ничего не будут делать. Выбор по тегу - это хороший способ игнорировать фактический текст и выбирать по самому элементу.