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


169

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

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

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

Ответы:


209

+ Изменить

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

в

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

1
как это работает с несколькими значениями? Например: document.getElementById('personlist').value=id1,id2не будет работать, как это сделать?
Утев

2
@utdev вот решение для множественного выбора stackoverflow.com/a/1296068/1251563 совет: вам нужно использовать цикл
breq

Так я не могу сделать что-то вроде .value = id1, id2или .value = [array]?
Утев

@utdev к сожалению нет ... Вы должны использовать цикл
Breq

Также вы можете получить значение с помощью опций выбора без установки класса, как var id = document.getElementById('personlist').value. Я использовал в другом ответе, все равно спасибо!
Альпер

44

Инструменты как чистый код 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;
}

1
Отличный пример того, как взаимодействовать с выбором с помощью чистого JavaScript!
Mr.GT

Ссылка на "Fiddler Demo" теперь приводит к 404 / Страница не найдена :-(
Genki

Вопрос в том, «Как изменить выбранную HTML-опцию с помощью JavaScript?». Вы просто копируете / вставляете кусок кода, ничего не отвечая.
Томас

28

Я считаю, что пост в блоге 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;
    }
  }
}

7
Вы, вероятно, должны breakвыйти из цикла, как только вы нашли выбранное значение. Экономит время, если список длинный и целевое значение - одно из первых.
daiscog

21

Вы также можете изменить атрибут 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>


21
mySelect.value = myValue;

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


Почему не все проголосовали, это новая функция? Мне нужно только поддерживать последние браузеры, хотя так или иначе происходит с этим.
Антон

2

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


2

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

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

1
Или без запроса, сохраняя целую кучу ненужных накладных расходов document.querySelector('#personlist').value=10;.
Манго

2

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

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

Я думаю, что вопрос был «Как изменить выбранную HTML-опцию с помощью JavaScript?»
Манго

0

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

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

0

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

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.