Question

我正在使用JavaScript函数，如果两个地址相同，应该将送货地址表格值复制到帐单地址表格部分。

我想依靠数据属性，文本或innerHTML来设置选择，因为一旦做出选择，选项ID就会更改。

<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循环有效，因为我可以通过将console.log放在if语句之外来记录bl的所有选项。这就是我所做的：

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)

在调试中，我可以在第187行中检查bl，options[i]和land，但不能检查.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最终是不同的对象类型，并且紧随developer.mozilla.org on "Using the equality operators"之后。这会生成运行时错误。我还不知道该怎么解决。

Answer 1

感谢@aseferov我发现了问题：

land有一个不可见的尾部字符，它是由红宝石在服务器上通过以下方式产生的：

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

生产了

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

land.trim（）之后，条件条件起作用。

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

1 个答案: