传单easyButton；将下拉列表设置为预定义选项的困难答案

【问题标题】：Leaflet easyButton; Difficulties setting a dropdown list to a predfined option传单easyButton；将下拉列表设置为预定义选项的困难
【发布时间】：2021-03-11 01:27:48
【问题描述】：

我正在尝试创建一个将下拉列表的值更改为特定选项的 easyButton 实例。我用来更改选项值的方法在代码中其他地方的 easyButton 实例之外工作。 easyButton 还会将预期值打印到控制台，否则工作正常。如果用于调用另一个函数，则该函数会执行，但仍不会更改下拉列表值。我真的不确定为什么会发生这种情况以及如何解决。 sn-ps的简化代码如下：

HTML;下拉列表

<select id="select">
    <option id="1">Option 1</option>
    <option id="2">Option 2</option>
    <option id="3">Option 3</option>
</select>

JS 脚本；传单easyButton。

    L.easyButton('<img src="./images/HomeIcon.png">', function(btn, map){
        $("#select option[id=3]").attr('selected', 'selected');
    }).addTo(mymap);

要强调的主要一点是选择器$("#select option[id=5]").attr('selected', 'selected'); 可以正常工作，直到我将它放入 Leaflet easyButton。

非常感谢您的帮助，特别是如果我能够理解我做错了什么以及我将来应该做什么。

【问题讨论】：

您没有使用" 关闭jquery 选择，这是问题还是代码中的错字？应该是：$("#select option[id=3]").attr('selected', 'selected');
抱歉，这是我简化问题时的一个错字。不幸的是，这不是原因。我刚刚更新了它。
对我来说它正在工作：jsfiddle.net/falkedesign/nzrbpw6v
好的。这真的很有趣。它一直有效，直到您手动将值更改为 2，但随后它停止工作。我之前没有注意到这一点，因为它已经从我的原生问题中的 id=3 开始（例如，它是一个“主页”按钮，页面从主页开始）。知道它为什么停止工作吗？

标签： javascript leaflet jquery-selectors dom-manipulation

【解决方案1】：

将id改为value：

<select id="select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

然后调用：

  L.easyButton('<img src="./images/HomeIcon.png">', function(btn, map){
        $("#select").val(3)
  }).addTo(map);

https://jsfiddle.net/falkedesign/nzrbpw6v/

【讨论】：

我只是在尝试一些东西，因为这显然是解决方法，但由于一些并发症，我无法直接将其放入。我会回来报告的，我只是想让你知道我没有擅离职守。
谢谢。我不确定为什么在手动更改下拉列表后原始解决方案停止工作，但此解决方案完美运行。