selected при создании options через AJAX не работает на Firefox

Question

selected при создании options через AJAX не работает на Firefox

Рейтинг: 0Ответов: 1Опубликовано: 10.02.2023

Список из option и сам select создаётся через AJAX, в хроме работает отлично selected, а вот Firefox отказывается показывать первый пункт выбранный по дефолту. Он показывает пустоту.

Я пробовал такие варианты

1.

document.querySelector("#main-sorting select").setAttribute('autocomplete', 'off');

2.

document.querySelector("#main-sorting option").setAttribute('default', true);

3.

document.querySelector("#main-sorting option").setAttribute('selected', true);

4.

document.querySelector('#main-sorting select option').click()

5. Сделал див, в который вставляется селект в виде

<form name="custom-select" method="POST" id="main-sorting">

Ни один не работает.

Вот, что на выходе получается

<form autocomplete="off" name="custom-select" method="POST" id="main-sorting">
    <div class="ais-SortBy">
        <select class="ais-SortBy-select" autocomplete="off">
            <option class="ais-SortBy-option" value="val1" default="true" selected="true">Default sorting</option>
            <option class="ais-SortBy-option" value="val2">Sort by popularity</option>
            <option class="ais-SortBy-option" value="val3">Sort by average rating</option>
            <option class="ais-SortBy-option" value="val4">Sort by price: low to high</option>
            <option class="ais-SortBy-option" value="val5">Sort by price: high to low</option>
        </select>
    </div>
</form>

Я могу управлять только <form autocomplete="off" name="custom-select" method="POST" id="main-sorting">, а всё внутри идет с сервера. А так же, атрибуты default="true" selected="true" добавил скриптом уже после загрузки всего этого:

const send = XMLHttpRequest.prototype.send
XMLHttpRequest.prototype.send = function() { 
    this.addEventListener('load', function() { 
         
        //add default option selected  
        document.querySelector("#main-sorting").querySelector('select').setAttribute('autocomplete', 'off'); 
        document.querySelector("#main-sorting option").setAttribute('default', true); 
        document.querySelector("#main-sorting option").setAttribute('selected', true); 
        document.querySelector('#main-sorting select option').click()
    return send.apply(this, arguments)
}

javascript html ajax select form

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Смотри все работает и выбирается без всяких танцев с бубнами...

const xhr = new XMLHttpRequest();
const url = 'https://fakerapi.it/api/v1/credit_cards?_quantity=10'
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
  if (this.readyState != 4) return;
  const os = document.createElement('select')
  let a = JSON.parse(this.responseText)
  a = a.data.forEach(o => {
    const oo = document.createElement('option')
    oo.textContent = o.owner
    os.append(oo)
  })
  document.querySelector('div').append(os)
}

xhr.send();

<div></div>

selected при создании options через AJAX не работает на Firefox

Ответы