如果单击所选值，则选择框上的jquery触发事件答案

【问题标题】：jquery trigger event on select box if selected value is clicked on如果单击所选值，则选择框上的jquery触发事件
【发布时间】：2014-03-14 21:48:38
【问题描述】：

我正在将此代码用于自定义样式的选择菜单：

 <div class="btn-wrap">
 <select id="myselect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
 </select>
  <button type="button" class="btn">
  <span>Select option <span class="selection"></span></span><span class="caret"></span>
  </button>
 </div>

我的 jquery 代码：

$('.btn-wrap select').bind('change',function () {
  $(this).parents('.btn-wrap').find('.selection').text($(this).find('option:selected').text());
});

问题是，如果我不想选择一个值，所以选择框假定一个作为默认值，如果单击该选项，“更改”甚至不会触发。

我尝试过使用以下代码，但它不起作用：

$("#myselect").attr("selectedIndex", -1);

这是Fiddle。

有什么想法吗？

编辑：我必须声明选择框绝对位于我的样式按钮的顶部，透明度为：0，因此使用“单击”和“更改”是不行的，因为它会填充列表。

我已经更新了小提琴，以便更好地显示问题（感谢创建原始小提琴的人）：

http://jsfiddle.net/ArMq7/6/

尝试选择第一个选项，看看值没有改变。

【问题讨论】：

你的问题我看了三遍，还是不明白问题出在哪里。
试试，$("#myselect").on('change', function(){ --whatever you want to do--});
如果没有有效的更改，为什么要触发更改事件？？？也许你最好解释一下你在寻找什么。设置一个默认值怎么样：jsfiddle.net/ArMq7/2
如果我理解正确...尝试绑定更改并单击虽然不确定此操作的有效性，但您需要停止传播以停止多次触发
没错，我正在寻找一个事件，而不是在单击相同选项时触发的更改。上面的答案在使用 id 时有效，但我有数百个选择框，所以我宁愿在课堂上使用它。

标签： jquery html select

【解决方案1】：

这可能是你要找的，手动触发 onchange 事件：

DEMO jsFiddle

$('.btn-wrap select').bind('change',function () {
  $(this).parents('.btn-wrap').find('.selection').text($(this).find('option:selected').text());
}).change();

【讨论】：

这会自动选择所有默认选择的选项；我正在寻找的是在页面加载时根本没有选择选项。
这是我最初的想法，也是我一开始使用的，但是，在我的风格上，选择绝对是在按钮的顶部，所以点击那里会自动填充框。它比其他答案更接近，但仍然没有：/

【解决方案2】：

你可以试试类似的。

<select id="myselect">
   <option value="0">Please Select</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

并将你的 jQuery 代码更改为

$('.btn-wrap select').bind('change',function () {
    if($(this).val() != '0'){
    $(this).parents('.btn-wrap').find('.selection').text($(this).find('option:selected').text());
    }
});

【讨论】：

..虽然这是我正在寻找的结果，但我不想显示额外的选项。我知道使用 hidden disabled MIGHT 可以解决问题，但在 IE11 上，甚至隐藏选项都被禁用。

【解决方案3】：

你可以试试这样的

<select id="myselect">
        <option value="0"></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
</select>

您还可以在用户选择一个值后删除第一个选项 - 例如：

$("#myselect").change(function(){
    $("option[value='0']").remove();
});

【讨论】：