Изменение выбранной опции элемента HTML Select

Ответ 1

Ванильный JavaScript

Использование простого старого JavaScript:

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
  var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

Ответ 2

Ни один из примеров, в которых используется jquery, действительно прав, поскольку они оставят выбор, отображающий первую запись, даже если значение было изменено.

Правильный способ выбора Аляски и выбор выберите нужный элемент, выбранный с помощью:

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

С jquery будет:

$('#state').val('AK').change();

Ответ 3

Разметка

<select id="my_select">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

JQuery

var my_value = 2;
$('#my_select option').each(function(){
    var $this = $(this); // cache this jQuery object to avoid overhead

    if ($this.val() == my_value) { // if this option value is equal to our value
        $this.prop('selected', true); // select this option
        return false; // break the loop, no need to look further
    }
});

Демо

Ответ 4

Проверить это демо

• Выбор опции на основе ее значения

  var vals = [2,'c'];
  
  $('option').each(function(){
     var $t = $(this);
  
     for (var n=vals.length; n--; )
        if ($t.val() == vals[n]){
           $t.prop('selected', true);
           return;
        }
  });
  

• Выбор варианта на основе его текста

  var vals = ['Two','CCC'];                   // what we're looking for is different
  
  $('option').each(function(){
     var $t = $(this);
  
     for (var n=vals.length; n--; )
        if ($t.text() == vals[n]){            // method used is different
           $t.prop('selected', true);
           return;
        }
  });
  

Поддержка HTML

<select>
   <option value=""></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

<select>
   <option value=""></option>
   <option value="a">AAA</option>
   <option value="b">BBB</option>
   <option value="c">CCC</option>
</select>

Ответ 5

Вы можете выбрать значение с помощью javascript:

document.getElementById('sel').value = 'bike';​​​​​​​​​​

DEMO

Ответ 6

Отличные ответы - вот версия D3 для тех, кто смотрит:

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>

Ответ 7

Я хочу изменить выбранный элемент выбранного значения как value, так и textContent (что мы видим) на "Mango".

Простой код, который работал ниже:

var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

Надеюсь, что это поможет кому-то. Удачи.
Если это вам помогло.

Ответ 8

Я использовал почти все ответы, размещенные здесь, но не устраивая это, поэтому я копаю один шаг и нашел легкое решение, которое соответствует моим потребностям и чувствую себя достойным поделиться с вами, ребята. Вместо итерации по всем параметрам или с помощью JQuery вы можете сделать с помощью ядра JS в простых шагах:

Пример

<select id="org_list">
  <option value="23">IBM</option>
  <option value="33">DELL</option>
  <option value="25">SONY</option>
  <option value="29">HP</option>
</select>

Значит, вы должны знать значение опции для выбора.

function selectOrganization(id){
    org_list=document.getElementById('org_list');
    org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

Как использовать?

selectOrganization(25); //this will select SONY from option List

Ваши комментарии приветствуются.:) AzmatHunzai.

Ответ 9

После большого поиска я попробовал @kzh в списке выбора, где я знаю только атрибут option inner text not value, этот код, основанный на выборе ответа, я использовал его для изменения опции выбора в соответствии с текущей страницей url в этом формате http://www.example.com/index.php?u=Steve

<select id="sel">
    <option>Joe</option>
    <option>Steve</option>
    <option>Jack</option>
</select>
<script>
    var val = window.location.href.split('u=')[1]; // to filter ?u= query 
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j++) {
        // search are based on text inside option Attr
        if(opt.text == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

Это сохранит параметры url, показанные как выбранные, чтобы сделать его более удобным для пользователя, и посетитель знает, какую страницу или профиль он просматривает в настоящее время.

Ответ 10

Я использовал это после обновления регистра и изменил состояние запроса через ajax, затем выполнил запрос с новым состоянием в том же script и поместил его в новое состояние элемента select tag, чтобы обновить представление.

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

Надеюсь, это полезно.

Ответ 11

Немного опрятная версия Vanilla.JS. Предполагая, что вы уже установили nodeList missing .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

Просто:

var requiredValue = 'i-50332a31',   
  selectBox = document.querySelector('select')

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})