在下拉列表中选择已选择的项目/选择 - 列表答案

【问题标题】：Select already selected item in dropdown/select - list在下拉列表中选择已选择的项目/选择 - 列表
【发布时间】：2011-05-11 12:38:45
【问题描述】：

我一直在寻找这个问题的答案已经有一段时间了，没有运气，或者最多有错误的解决方案。

我面临的问题是我有一个选择元素（显然）在选择已选择的项目时不会触发“onchange”事件。

像这样：

<select onchange="alert(this.value);">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

现在，假设我先选择项目 1。然后之后我需要能够再次选择项目 1。

此功能对于我正在从事的项目的成功非常重要。

非常感谢任何帮助。

编辑：（更多信息）

当我正在使用谷歌地图进行项目时需要此功能，在该项目中，用户可以通过下拉菜单快速跳转到一个国家/地区（例如，您在下拉菜单中选择“西班牙”，谷歌地图将西班牙设置为您的视图。

当您想去西班牙，然后在地图上拖动，最终到达意大利时，问题就来了。现在你想回到西班牙，但你不能从下拉列表中选择它，直到你先选择其他东西。我的老板不喜欢这样:)

Edit2：解决方案

所以现在有一些解决方案。其中之一是将动作 onblur （当取消控制焦点时）这可以工作，因为我可以模糊列表 onchange，但仍然对于再次选择相同项目的人来说，模糊控件的触发器不会去，除非他们自己切换焦点，否则他们不会看到地图的变化。

我仍然不明白为什么很难找到一些在选项选择/单击/模糊或其他方式上执行的事件。我会继续寻找自己，稍后再回来查看。

编辑 3：最终解决方案

是的，所以我终于设法让这个工作，不完全像它应该是，但足够接近，至少现在反正。

我想出的解决方案是在选择的顶部添加“请选择国家/地区”选项。然后在更改时，我会将“请选择国家/地区”的文本和值更改为所选项目的值，并将 selectedindex 重置为 0。通过这种方式，在选择时，例如西班牙，它将处于禁用状态的列表顶部，并在工作状态下进一步下降。所以现在你可以点击列表中间的西班牙返回西班牙，即使它仍然被选中（最上面的项目是）

非常简洁，想法是由同事提供的。

脚本如下：

   var dummyOption;
function setdummyCountry(obj)
{
    var selectedOption = obj.options[obj.selectedIndex];
    if (dummyOption != null) {
        dummyOption.text = selectedOption.text;
        dummyOption.value = selectedOption.value;
    }
    else {
        dummyOption = document.createElement("option");
        dummyOption.text = selectedOption.text;
        dummyOption.value = selectedOption.value;
        dummyOption.setAttribute("disabled", "true");
        obj.options[0] = dummyOption;
    }
    obj.selectedIndex = 0;
}

<select onchange="setdummyCountry(this);">
    <option value="">Please select country</option>
    <option value="ES">spain</option>
    <option value="SE">sweden</option>
    <option value="NO">norway</option>
</select>

我希望这会对某人有所帮助！

对于那些试图帮助我的人，感谢您的想法和时间。

【问题讨论】：

如果您将 onchange 更改为 onclick，这会为您解决吗？
您能否添加更多信息，说明您为什么需要这种行为？我们或许可以为您提供更好的选择
只需先写下所有选项，然后添加一个带有selected 标签的选项。所有选项都在数组中吗？请解释更多
#thesupertramp 在某种程度上是的。我已经阅读了该帖子，但其中的解决方案似乎无法解决我的问题。我快要疯了，这有多难。如果我无法找到解决方案，我猜一个（蹩脚的）解决方案是将重置事件绑定到谷歌地图的拖动端。因此，每当您拖动时，将所选索引重置为“请选择一个项目”或其他内容。我的老板不会喜欢那样...
在我看来，重置事件 ondrag 是可行的方法，并且是良好的可用性设计。一旦你从“西班牙”拖走，那么你就不再专注于西班牙。它不会在“意大利”上有意义，但仍将“西班牙”显示为所选国家/地区。

标签： javascript jquery html select drop-down-menu

【解决方案1】：

我认为如果选择了相同的项目，则不会触发更改事件。我们遇到了同样的问题，所以我们做了一个简单的可用性修改：当一个项目被选中时，我们向用户显示在一个跨度中选择的项目并将下拉列表的值重置为其默认值（--Select--）。

HTH

【讨论】：

【解决方案2】：

这可能不是您想要的，但这是您可以决定的另一种选择。选择选项后，将其恢复为默认（空的/第一个）选项

<select onchange="alert(this.value);this.value='';">
 <option value='' selected='selected'></option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>

或者你可以制作

<select onblur="alert(this.value);">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>

但是当用户离开/模糊/取消焦点列表时，这种方式会调用你的函数（警报）：p

【讨论】：

【解决方案3】：

我一直在寻找相同场景的解决方案，最终为相同的场景编写了一个 angularjs 指令 -

guthub link - angular select

使用element[0].blur(); 将焦点从选择标签上移开。逻辑是在第二次点击下拉菜单时触发这种模糊。

as-select 被触发，即使用户在下拉列表中选择了相同的值。

演示 - link

【讨论】：

【解决方案4】：

您可以使用 onclick 功能并为此保持计数，一旦您获得相同的 target.value 两次，您就可以在那里执行您的 onchange 功能。我已经在 Vue.js 中实现了这个

选择区块：

                          <select
                            id="status"
                            name="status"
                            @change="
                              onChangeStatus(un.id, $event)
                            "
                            @click="
                              onChangeStatus(
                                un.id,
                                $event,
                                'same'
                              )
                            "
                            class="form-control"
                            :value="un.status"
                          >
                            <option value="Uncleaned">Uncleaned</option>
                            <option value="Partially Taken for cleaning">
                              Partially Taken for cleaning
                            </option>
                            <option value="Fully Taken for cleaning">
                              Fully Taken for cleaning
                            </option>
                          </select>

最初保持 count=0。

我在两个事件上都使用了相同的函数，检查了条件并相应地返回了数据

onChangeStatus(id, e, type) {
  if (type === "same") {
    if (e.target.value === "Partially Taken for cleaning") {
      this.count += 1;
      if (this.count === 2)
        this.$router.push({
          name: "NewPage",
          params: {
            id: id,
            status: e.target.value,
          },
        });
    }
  } else {
    this.$router.push({
      name: "NewPage",
      params: {
        id: id,
        status: e.target.value,
      },
    });
  }
},

【讨论】：