Как программно установить значение элемента select box, используя JavaScript?

У меня есть следующий элемент HTML

Используя функцию JavaScript с номером leaveCode в качестве параметра, как выбрать соответствующую опцию в списке?

вопрос задан 17.09.2008
brasskazoo
35382 репутация

15 ответов


  • 0 рейтинг

    Существуют различные способы . Выберите значения из раскрывающегося списка, используя Javascript .

    Скорее всего, вы хотите это:

    $("._statusDDL").val('2');
    

    ИЛИ

    $('select').prop('selectedIndex', 3); 
    
    ответ дан lumi77, с репутацией 137, 25.05.2016
  • 0 рейтинг
    SelectElement("leaveCode", valueToSelect)
    
    function SelectElement(id, valueToSelect)
    {    
        var element = document.getElementById(id);
        element.value = valueToSelect;
    }
    
    ответ дан Mitchel Sellers, с репутацией 50981, 17.09.2008
  • 0 рейтинг

    Не отвечает на вопрос, но вы также можете выбрать по индексу, где i - индекс элемента, который вы хотите выбрать:

    var formObj = document.getElementById('myForm');
    formObj.leaveCode[i].selected = true;
    

    Вы также можете перебирать элементы для выбора по отображаемому значению с помощью цикла:

    for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
        if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;
    
    ответ дан Chase Seibert, с репутацией 12177, 17.09.2008
  • 0 рейтинг

    Боюсь, что сейчас я не могу это проверить, но в прошлом я полагал, что должен был присвоить каждому тегу опции идентификатор, а затем я сделал что-то вроде:

    document.getElementById("optionID").select();
    

    Если это не сработает, может быть, это приблизит вас к решению: P

    ответ дан Lucas Oman, с репутацией 13019, 17.09.2008
  • 0 рейтинг
    
    function foo(value)
    {
        var e = document.getElementById('leaveCode');
        if(e) e.value = value;
    }
    
    
    ответ дан mmattax, с репутацией 15134, 17.09.2008
  • 0 рейтинг
    document.getElementById('leaveCode').value = '10';
    

    Это должно установить выбор "Ежегодный отпуск"

    ответ дан William, с репутацией 5676, 17.09.2008
  • 0 рейтинг

    Если вы используете PHP, вы можете попробовать что-то вроде этого:

    $value = '11';
    $first = '';
    $second = '';
    $third = '';
    $fourth = '';
    
    switch($value) {
                case '10' :
                    $first = 'selected';
                break;
                case '11' :
                    $second = 'selected';
                break;
                case '14' :
                    $third = 'selected';
                break;
                case '17' :
                    $fourth = 'selected';
                break;
            }
    
    echo'
    ';
    
    ответ дан almyz125, с репутацией 327, 29.01.2014
  • 0 рейтинг

    Я пробовал вышеупомянутые решения на основе JavaScript / jQuery, такие как:

    $("#leaveCode").val("14");
    

    и

    var leaveCode = document.querySelector('#leaveCode');
    leaveCode[i].selected = true;
    

    в приложении AngularJS, где было , требуется & lt; select & gt; элемент.

    Ни один из них не работает, потому что проверка формы AngularJS не запускается. Хотя была выбрана правильная опция (и отображается в форме), ввод оставался недействительным (классы 3894676001 нг-нетронутые и нг-недействительные все еще присутствуют)

    Для принудительной проверки AngularJS вызовите jQuery change () после выбора опции:

    $("#leaveCode").val("14").change();
    

    и

    var leaveCode = document.querySelector('#leaveCode');
    leaveCode[i].selected = true;
    $(leaveCode).change();
    
    ответ дан lumi77, с репутацией 137, 1.06.2015
  • 0 рейтинг

    Я сравнил разные методы:

    Сравнение различных способов установки значения выбора с помощью JS или jQuery

    код:

    $(function() {
        var oldT = new Date().getTime();
         var element = document.getElementById('myId');
        element.value = 4;
        console.error(new Date().getTime() - oldT);
    
    
        oldT = new Date().getTime();
        $("#myId option").filter(function() {
            return $(this).attr('value') == 4;
        }).attr('selected', true);
        console.error(new Date().getTime() - oldT);
    
    
        oldT = new Date().getTime();
        $("#myId").val("4");
        console.error(new Date().getTime() - oldT);
    
    
    });
    

    Вывод для выбора с ~ 4000 элементами:

    1 мс

    58 мс

    612 мс

    с Firefox 10. Примечание: единственная причина, по которой я прошел этот тест, заключалась в том, что jQuery показал очень плохие результаты в нашем списке с ~ 2000 записями (у них был более длинный текст между опциями). У нас было примерно 2 с задержка после val ()

    Примечание также: я устанавливаю значение в зависимости от реального значения, а не текстовое значение

    ответ дан Toskan, с репутацией 4735, 10.08.2012
  • 0 рейтинг

    Самый простой способ, если вам нужно:
    1) Нажмите кнопку, которая определяет опцию выбора
    2) Перейти на другую страницу, где выбрать вариант
    3) Выберите значение этого параметра на другой странице

    1) Ваши кнопки ссылок (скажем, на главной странице)

    Sales
    IT
    

    (где контакт. php это ваша страница с опциями выбора. Обратите внимание на страницу URL? опция = 1 или 2)

    2) поместите этот код на вторую страницу (мой контакт ). php )

    
    
    

    3) выберите значение параметра в зависимости от нажатой кнопки

    
    

    . , и так далее.
    Так что это простой способ передачи значения на другую страницу (с помощью списка опций выбора) через GET в URL. Нет форм, нет идентификаторов. , всего 3 шага и все работает отлично.

    ответ дан Lana, с репутацией 63, 18.03.2011
  • 0 рейтинг

    Должно быть что-то вроде этого:

    function setValue(inVal){
    var dl = document.getElementById('leaveCode');
    var el =0;
    for (var i=0; i
    ответ дан Stephen Wrighton, с репутацией 26318, 17.09.2008
  • 0 рейтинг

    Предположим, что ваша форма названа form1 :

    function selectValue(val)
    {
      var lc = document.form1.leaveCode;
      for (i=0; i<lc.length; i++)
      {
        if (lc.options[i].value == val)
        {
            lc.selectedIndex = i;
            return;
        }
      }
    }
    
    ответ дан Milan Babuškov, с репутацией 33490, 17.09.2008
  • 0 рейтинг
    function setSelectValue (id, val) {
        document.getElementById(id).value = val;
    }
    setSelectValue('leaveCode', 14);
    
    ответ дан Andrew Hedges, с репутацией 16460, 17.09.2008
  • 0 рейтинг

    Почему бы не добавить переменную для идентификатора элемента и сделать ее функцией многократного использования?

    function SelectElement(selectElementId, valueToSelect)
    {    
        var element = document.getElementById(selectElementId);
        element.value = valueToSelect;
    }
    
    ответ дан Robert Swisher, с репутацией 1124, 17.09.2008
  • 0 рейтинг

    Если вы используете jQuery, вы также можете сделать это

    $('#leaveCode').val('14');
    

    Это выберет опцию со значением 14

    Редактировать:

    С простым Javascript это также может быть достигнуто с помощью двух методов документа

    с querySelector , вы можете выбрать элемент на основе CSS селектора

    document.querySelector('#leaveCode').value = '14'
    

    Или более устоявшийся подход, с getDocumentById , который, как следует из названия функции, позволит вам выбрать элемент на основе этого id

    document.getElementById('leaveCode').value = '14'
    

    Вы можете запустить приведенный ниже код, чтобы увидеть эти методы и функцию jQuery в действии.

    const jQueryFunction = () => {
      
      $('#leaveCode').val('14'); 
      
    }
    
    const querySelectorFunction = () => {
      
      document.querySelector('#leaveCode').value = '14' 
      
    }
    
    const getElementByIdFunction = () => {
      
      document.getElementById('leaveCode').value='14' 
      
    }
    input {
      display:block;
      margin: 10px;
      padding: 10px
    }
    
    
    
    
    
    
    
    ответ дан Einar Ólafsson, с репутацией 1661, 23.12.2010