Jquery 年份选择器未按预期工作答案

【问题标题】：Jquery year picker not working as expectedJquery 年份选择器未按预期工作
【发布时间】：2014-03-24 06:25:11
【问题描述】：

我创建了一个简单的 jquery 年份选择器，带有 post 的 jelp 并添加了一些自定义代码以使 yearpicker 显示选定的某些特定值。这是我的代码

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<select name="yearpicker" data-id="2010" class="yearpicker">
</select>

<select name="yearpicker"  data-id="2006" class="yearpicker">
</select>

JavaScript

$(function () {
   for (i = new Date().getFullYear() ; i > 1900; i--) {

      $this = $('.yearpicker');
      if ($this.attr("data-id") != i) {
         $this.append($('<option />').val(i).html(i));
       } else {
          $this.append($('<option selected/>').val(i).html(i));
       }
    }
});

我想要的是，我将一个名为"data-id" 的属性绑定到后端的选择控件，并且当脚本运行时，我希望在前端选择该元素。并且我在页面中有多个选择控件，由于某种原因，总是在所有选择中选择第一个选择 data-id。详细JSfiddle is here。您可以看到在两种情况下都选择了 2010，而我希望在第二个 <select/> 上选择 2006 谁能指出我做错了什么？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

试试这个：

$(function () {
   $('.yearpicker').each(function(){
      for (i = new Date().getFullYear() ; i > 1900; i--) {
         $this = $(this);
         if ($this.attr("data-id") != i) {
            $this.append($('<option />').val(i).html(i));
         } else {
            $this.append($('<option/>').val(i).attr("selected", "selected").html(i));
         }
      }
   });
});

Working Fiddle

【讨论】：

【解决方案2】：

改变这一行：

$this.append($('<option selected/>').val(i).html(i));

到

$this.append($('<option/>').val(i).html(i).attr("selected", "selected"));

完整代码：

  $(function () {
  $('.yearpicker').each(function() {
      $this = $(this);
              for (i = new Date().getFullYear() ; i > 1900; i--) {


            if ($this.attr("data-id") != i) {
                $this.append($('<option />').val(i).html(i));
            } else {
                $this.append($('<option/>').val(i).html(i).attr("selected", "selected"));
            }
        }
  });

});

【讨论】：