如何使用 jQuery 将选定值设置为多个 Select 输入？答案

【问题标题】：How to set selected value to multiple Select inputs with jQuery?如何使用 jQuery 将选定值设置为多个 Select 输入？
【发布时间】：2011-04-30 16:57:47
【问题描述】：

我有 2 个选择输入，我用一系列年份填充它们。之后，我想为每个 Select 设置 currentYear 的选定值。我有这段代码，但只适用于第一个 Select 我不明白为什么。

编辑 2

jQuery 1.4.3 一切正常，1.4.2 失败:_(

编辑

我尝试这个没有成功:-(只有第一个选择值OK。版本中可能有问题吗？IE6，asp.net 2.0，jquery 1.4.2。例如，“$(sinceComboSelector).val( currentYear);" 不起作用我必须做一个 "$('#cmbAnyDesde option[value=' + currentYear + ']').attr('selected', 'selected');" :-(

代码更新：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tests.aspx.cs" Inherits="Tests" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../JAVASCRIPT/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function() {
            loadYears();
        });
        var loadYears = function() {
            var currentYear = new Date().getFullYear(),
                years = [],
                firstYear = currentYear - 7,
                lastYear = currentYear + 3,
                sinceComboSelector = "#cmbAnyDesde",
                toComboSelector = "#cmbAnyHasta",
                i;

            for (i = firstYear; i <= lastYear; i++) {
                years.push(i);
            }

            $(sinceComboSelector).find('option').remove();

            $(toComboSelector).find('option').remove();

            $.each(years, function(key, value) {
                $(sinceComboSelector)
                  .append($("<option></option>")
                  .attr("value", value)
                  .text(value));

                $(toComboSelector)
                  .append($("<option></option>")
                  .attr("value", value)
                  .text(value)); ;
            });

//            $(sinceComboSelector).val(currentYear);
//            $(toComboSelector).val(currentYear);
            $('#cmbAnyDesde option[value=' + currentYear + ']').attr('selected', 'selected');            
            $('#cmbAnyHasta option[value=' + currentYear + ']').attr('selected', 'selected');
        }; 
    </script>
    <form id="form1" runat="server">
    <div>
        <select id="cmbAnyDesde" style="width:70px"></select>
        <select id="cmbAnyHasta" style="width:70px"></select>
    </div>
    </form>
</body>
</html>

谢谢

【问题讨论】：

我不确定您的问题是什么，但请注意if ($('#cmbAnyHasta)) { 将始终通过。请改用$('#cmbAnyHasta').length。
好的，谢谢，我会记住的
页面上是否发生了任何 javascript 错误，可能会提供有关它为什么不起作用的线索？如果我只是将您的 javascript 放入带有几个具有正确 ID 的 html 框的测试页面中，那么它似乎可以完美运行：jsfiddle.net/XmPas。很明显，问题超出了您在此处粘贴的内容。也许从您的页面中删减一些内容以尝试形成一个最小测试用例。很有可能你删掉的东西会让它开始工作，然后你就可以找出原因（或向我们询问更多可用信息）。
哇！我不知道 Fiddle，我用不同的 jQuery 版本进行了测试，我发现 1.4.2 失败但 1.4.3 效果很好。非常感谢
任何以另一个人知道 JSFiddle 结尾的问题都是一个好问题。 ;-)

标签： javascript jquery select combobox option

【解决方案1】：

我在这里使用上面的代码进行了测试，并且可以正常工作：

$(document).ready(function (){

  loadYears();

});

var loadYears = function () {
  var currentYear = new Date().getFullYear(),
    years = [],
    firstYear = currentYear - 7,
    lastYear = currentYear + 3,
    sinceComboSelector = "#cmbAnyDesde",
    toComboSelector = "#cmbAnyHasta",
    i;

  for (i = firstYear; i <= lastYear; i++){
    years.push(i);
  }

  $(sinceComboSelector).find('option').remove();

  $(toComboSelector).find('option').remove();

  $.each(years, function(key, value) {
    $(sinceComboSelector)
      .append($("<option></option>")
      .attr("value", value)
      .text(value));

    $(toComboSelector)
      .append($("<option></option>")
      .attr("value", value)
      .text(value)); ;
  });

  $(sinceComboSelector).val(currentYear);
  $(toComboSelector).val(currentYear);
};

【讨论】：

我对 javascript 和 jQuery 很陌生，我不确定你想让我做什么 :( 我当前的代码在一个“普通”函数中，并在 $(document ).read 还不够吗？
它已经被封装在一个匿名函数中，该函数被传递给 ready()。
是的，如果您使用的是 $(document).ready(function (){ });你是对的。
u_u 问题依旧，可能是版本问题？我简化了代码（同一页面中的 JS，来自madeinstefano ^^u 的完整复制/粘贴），我更新了代码，但不起作用：-S
OMFG！ jQuery 1.4.2 失败但 1.4.3 效果很好 >_____