Question

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

 <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，因此使用'click'和'change'是不行的，因为它填充了列表。

我更新了小提琴，以便问题更好（感谢创造原始小提琴的人）：

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

尝试选择第一个选项，并查看该值未更改。

Answer 1

这可能是您正在寻找的，手动触发更改事件：

DEMO jsFiddle

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

Answer 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());
    }
});

Answer 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();
});

如果单击选定的值，则选择框上的jquery触发器事件

3 个答案: