如何使用jQuery选择<select>的第一个选项

26 回答

• 0

  我认为我发现有关最高投票答案的一个微妙之处在于即使他们正确地更改了所选值，他们也不会更新用户看到的元素（只有当他们点击小工具时他们才会看到旁边的支票 . 更新的元素） .

  将.change（）调用链接到末尾也会更新UI小部件 .

  $("#target").val($("#target option:first").val()).change();
  

  （请注意，我在使用jQuery Mobile和Chrome桌面上的一个框时注意到了这一点，所以在任何地方都可能不是这样） .

  回复于 2024-04-26T11:53:27+08:00
• 30

  $('#newType option:first').prop('selected', true);
  

  回复于 2024-04-26T11:53:27+08:00
• 4

  我发现如果已经选择了属性，那么只选择设置的attr不起作用 . 我现在使用的代码将首先取消设置所选属性，然后选择第一个选项 .

  $('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');
  

  回复于 2024-04-26T11:53:27+08:00
• 2

  对我来说，它只在我添加以下代码行时才有用

  $('#target').val($('#target').find("option:first").val());
  

  回复于 2024-04-26T11:53:27+08:00
• 41

  如果您已禁用选项，则可以添加 not([disabled]) 以防止选择它们，结果如下：

  $("#target option:not([disabled]):first").attr('selected','selected')
  

  回复于 2024-04-26T11:53:27+08:00
• 830

  $("#target").val($("#target option:first").val());
  

  回复于 2024-04-26T11:53:27+08:00
• 8

  如果你打算使用第一个选项作为默认选项

  <select>
      <option value="">Please select an option below</option>
      ...
  

  然后你可以使用：

  $('select').val('');
  

  这很好，很简单 .

  回复于 2024-04-26T11:53:27+08:00
• 127

  $('select#id').val($('#id option')[index].value)

  将 id 替换为特定的选择标记ID，并将 index 替换为您要选择的特定元素 .

  即

  <select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                          <option value="AB">AB</option>
                                          <option value="AK">AK</option>
                                          <option value="AL">AL</option>
  </select>
  

  所以这里第一个元素选择我将使用以下代码：

  $('select#ddlState').val($('#ddlState option')[0].value)
  

  回复于 2024-04-26T11:53:27+08:00
• 0

  // remove "selected" from any options that might already be selected
  $('#target option[selected="selected"]').each(
      function() {
          $(this).removeAttr('selected');
      }
  );
  
  
  // mark the first option as selected
  $("#target option:first").attr('selected','selected');
  

  回复于 2024-04-26T11:53:27+08:00
• 7

  它只适用于我最后使用触发器（'更改'），如下所示：

  $("#target option:first").attr('selected','selected').trigger('change');
  

  回复于 2024-04-26T11:53:27+08:00
• 13

  $("#target").val(null);
  

  铬合金很好

  回复于 2024-04-26T11:53:27+08:00
• 0

  在James Lee Baker的回复背后，我更喜欢这个解决方案，因为它消除了对浏览器支持的依赖：首先：选择...

  $('#target').children().prop('selected', false);
  $($('#target').children()[0]).prop('selected', 'selected');
  

  回复于 2024-04-26T11:53:27+08:00
• 0

  $("#target")[0].selectedIndex = 0;
  

  回复于 2024-04-26T11:53:27+08:00
• 103

  很简单：

  $('#target option:first').prop('selected', true);
  

  回复于 2024-04-26T11:53:27+08:00
• 6

  您可以使用它从 dropdown 中选择任何选项 .

  // 'N' can by any number of option.  // e.g.,  N=1 for first option
  $("#DropDownId").val($("#DropDownId option:eq(N-1)").val());
  

  回复于 2024-04-26T11:53:27+08:00
• 1

  如果要存储select元素的jQuery对象：

  var jQuerySelectObject = $("...");
  
  ...
  
  jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());
  

  回复于 2024-04-26T11:53:27+08:00
• 59

  我是这样做的：

  $("#target option")
      .removeAttr('selected')
      .find(':first')     // You can also use .find('[value=MyVal]')
          .attr('selected','selected');
  

  回复于 2024-04-26T11:53:27+08:00
• 15

  当你使用

  $("#target").val($("#target option:first").val());
  

  如果第一个选项值为null，则无法在Chrome和Safari中使用 .

  我更喜欢

  $("#target option:first").attr('selected','selected');
  

  因为它可以在所有浏览器中使用 .

  回复于 2024-04-26T11:53:27+08:00
• 5

  对我来说，只有在我添加以下代码时才有效：

  .change();

  对我来说，只有在我添加以下代码时才有效：因为我想“重置”表单，即选择表单所有选择的所有第一个选项，我使用了以下代码：

  $('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

  回复于 2024-04-26T11:53:27+08:00
• 2

  更改选择输入的值或调整所选属性可能会覆盖DOM元素的默认selectedOptions属性，从而导致元素在调用了重置事件的表单中无法正确重置 .

  使用jQuery的prop方法清除并设置所需的选项：

  $("#target option:selected").prop("selected", false);
  $("#target option:first").prop("selected", "selected");
  

  回复于 2024-04-26T11:53:27+08:00
• 2

  虽然每个功能可能都没有必要......

  $('select').each(function(){
      $(this).find('option:first').prop('selected', 'selected');
  });
  

  适合我 .

  回复于 2024-04-26T11:53:27+08:00
• 0

  使用：

  alert($( "#target option:first" ).text());
  

  回复于 2024-04-26T11:53:27+08:00
• 0

  你可以试试这个

  $("#target").prop("selectedIndex", 0);
  

  回复于 2024-04-26T11:53:27+08:00
• 0

  重置值（对于多个选定元素）的另一种方法可能是：

  $("selector").each(function(){
  
      /*Perform any check and validation if needed for each item */
  
      /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */
  
      this.selectedIndex=0;
  
  });
  

  回复于 2024-04-26T11:53:27+08:00
• 1

  使用：

  $("#selectbox option:first").val()
  

  请在this JSFiddle找到工作简单 .

  回复于 2024-04-26T11:53:27+08:00
• 17

  使用带有ECMAScript 6的jQuery检查这个最佳方法：

  $('select').each((i, item) => {
    var $item = $(item);
    $item.val($item.find('option:first').val()); 
  });
  

  回复于 2024-04-26T11:53:27+08:00