Как установить выпадающий выбор через атрибут данных или текст? - PullRequest
0 голосов
/ 21 января 2019

Я работаю над функцией JavaScript, которая должна копировать значения формы адреса доставки в раздел формы адреса выставления счета, если оба идентичных.

Я хотел бы установить атрибут данных, текст или innerHTML для установкивыбор, поскольку идентификатор опции изменяется после того, как выбор сделан.

<select id="order_bill_to_land" name="order[bill_to_land_id]"><option value="">select a country</option>
  <option value="1" data-land="1">Afghanistan</option>
  <option value="2" data-land="2">Aland Islands</option>
  <option value="3" data-land="3">Albania</option>

Моя функция JavaScript:

let land = document.querySelector("#country").getAttribute('data-country');
let bl = document.querySelector("#order_bill_to_land");

for (let i = 0; i < bl.options.length; i++) {
  if (bl.options[i].text === land) {
    return console.log("if loop working");
    bl.selectedIndex = i;
    break;
  };
}

, которая выдает 0, потому что условие if не работаетчто я могу сделать из того факта, что не могу войти в консоль.

Почему это так?

Я нашел более короткую версию для выбора selectedIndex:

bl.selectedIndex = [...bl.options].findIndex (option => option.innerHTML === land);

но это производит -1.Так как он так хорошо сжат, я не могу понять, почему он не работает.

Как мне заставить это работать?

Заранее спасибо!

Обновление

Цикл for работает, так как мне удалось зарегистрировать все параметры bl, поместив console.log вне оператора if.Вот что я сделал:

for (let i = 0; i < bl.options.length; i++) {
  console.log(land);                            // Line 185
  console.log(bl.options[i].text);              // Line 186
  if (bl.options[i].text === land) {            // Line 187
    bl.selectedIndex = i;
    break;
  };
}

console.log(bl.selectedIndex);                  // Line 203

, который выдает следующий консольный вывод:

...
[Log] Germany (dev.js, line 185)
[Log] Zambia (dev.js, line 186)
[Log] Germany (dev.js, line 185)
[Log] Zimbabwe (dev.js, line 186)
[Log] 0 (dev.js, line 203)

В режиме отладки я могу проверить bl, options[i] и land в строке 187, но не .text.Я не знаю, нормально ли это.Так как я могу записать их вне оператора if, это должно сработать, или?

Теоретически оно должно циклически проходить через bl, а когда bl.options[i].text (или .innerHTML) совпадает с land, прервитеЦикл и вывод bl.selectedIndex = i и для этого установите форму выбора.

Обновление 2

В консоли я получаю:

let bl = document.querySelector("#order_bill_to_land")
undefined
let land = document.querySelector("#country").getAttribute('data-country');
undefined
land;
"Germany"
bl.options[84].text
"Germany"

Так что обавведите String, но когда я проверяю:

land === bl.options[84].text;

я получаю false.

Я подозреваю, что land и bl.options[i].text в конечном итоге будут объектами разных типов и последующими разработчиками.mozilla.org на тему «Использование операторов равенства» .Это приводит к ошибке во время выполнения.Я пока не знаю, как ее решить.

1 Ответ

0 голосов
/ 23 января 2019

Благодаря @aseferov я обнаружил проблему:

land имел скрытый невидимый символ, который был создан ruby ​​на сервере через:

data-country="<%= @order.land.name %>"

Который произвел

let land = document.querySelector("#country").getAttribute('data-country');

После land.trim () условно сработало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...