Question

我有一个选择第一个选项是Search by date。我想这样做，以便当select获得焦点时，此值会更改（到All dates），因为此选项返回所有日期的数据。我已经达到了这个目标;

$("#select-date").focus(function() {
    window.alert('Focus!');
    $('#select-date option[value="Search by Date"]').attr("value", "All Dates");
});

将警报作为一个触发罚款I have found my select的测试，第二个不做任何事情。我做错了什么？

Answer 1

你在这里非常正常，但使用attr并不会为你改变所选项目，因为你所做的只是改变了返回的option元素的值从"Search by Date"到"All Dates"的jQuery选择器。

在focus()事件侦听器中，您可以使用$("#select-dates").val()获取下拉框的当前值。然后根据组中第一个 option子元素的值检查此值。

如果当前值与第一个元素的值匹配，则使用$("#select-dates").val('all')将控件的选定值分配给all。

<强>演示

你可以看到我准备的jsFiddle，here。

<强> HTML

<select id="select-date">
  <option>- Select Date -</option>
  <option value="all">All Dates</option>
  <option value="2016-05">May, 2016</option>
  <option value="2016-04">April, 2016</option>
  <option value="2016-03">March, 2016</option>
  <option value="2016-02">February, 2016</option>
  <option value="2016-01">January, 2016</option>
  <option value="2015-12">etc, etc...</option>
</select>

<强>的JavaScript

$("select#select-date").on('focus', function() {
  if ($(this).val() == null || $(this).val() == $(this).find("option:first-child").val()) {
    $(this).val("all");
  }
});

这将适用于您希望发生此类功能的任何下拉框。

更改焦点上的选择值

1 个答案: