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

标签 javascript jquery html select drop-down-menu

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

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

像这样:

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

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

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

非常感谢任何帮助。

编辑:(更多信息)

此功能是必需的,因为我正在处理一个使用谷歌地图的项目,在该项目中,用户会看到一个下拉菜单以快速跳转到一个国家(例如,您在下拉菜单中选择“西类牙”,谷歌地图将西类牙设置为您的 View 。

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

Edit2:解决方案

所以现在有一些解决方案。 其中之一是将 Action 放在模糊上(当取消控制时)这可以工作,因为我可以在更改时模糊列表,但对于再次选择相同项目的人来说,触发模糊控制不会去,除非他们自己切换焦点,否则他们不会看到 map 的变化。

我仍然不明白为什么很难找到在选项选择/单击/模糊或其他任何情况下执行的事件。我会继续寻找自己,稍后再回来查看。

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

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

感谢那些试图帮助我的人,感谢你们的想法和时间。

最佳答案

我认为如果选择了相同的项目,则不会触发更改事件。我们面临着同样的问题,所以我们所做的是一个简单的可用性黑客:当一个项目被选中时,我们向用户显示在一个范围内选择的项目并将下拉列表的值重置为其默认值(--Select--)。

HTH

关于javascript - 在下拉列表/选择列表中选择已选择的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5964362/

相关文章:

javascript - 如何在 Vue.js 应用程序中共享 "computed"方法

javascript - 使用选择器不工作调用 .load()

html - 两个 div 并排,但如果屏幕太小,则强制右侧 div 保持在左侧 div 上方

javascript - 扩展 V8 JavaScript 引擎

javascript - 以下 Javascript 语句返回什么?为什么?

php - 如何使用php代码访问javascript变量

python - 希望在 python 中将 html 转换为 ascii 文本(ansi 可能)

javascript - 如何从 html select 中删除选定的选项?

javascript - 通过单击显示 div 后启动 TwentyTwenty.js

javascript - 是否可以在不破坏后代事件监听器的情况下附加到 innerHTML?