如何通过数据属性或文本设置下拉选择？

Question

I am working on a JavaScript function which should copy shipping address form values to a billing address form section in case both are identical.

I wanted to rely either on a data attribute, text or innerHTML to set the select, since option id changes once a selection has been made.

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

My JavaScript function is:

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;
  };
}

Which produces 0 , because the if conditional does not work which I deduce from the fact that I am unable to log to console.

Why is that so?

I found a shorter version for selecting the selectedIndex:

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

but it produces -1 . Since it is so nicely condensed I am unable to find out why it does not work.

How can I get this working?

Thank you in advance!

Update

The for loop works, since I was able to log all options of bl by putting a console.log outside of the if statement. This is what I did:

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

Which produces the following console output:

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

In debug I can check bl , options[i] and land in line 187, but not .text . I do not know if this is normal. Since I am able to log them outside of the if-statement this should work, or?

Theoretically it should loop through bl and when bl.options[i].text (or .innerHTML ) matches land break the loop and output bl.selectedIndex = i and therefor set the select form.

Update 2

In console I get:

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"

So both are type String, but when I test:

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

I get false .

I suspect land and bl.options[i].text end up being different object types and following developer.mozilla.org on "Using the equality operators" . This generates a runtime error. I do not know yet how to solve it.

Answer 1

Thanks to @aseferov I found the problem:

land had a tailing invisible character which was produced by ruby on the server through:

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

Which produced

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

After land.trim() the conditional worked.