Question

我创建了一个简单的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。您可以看到，在我希望在第二个<select/>选择2006年的两种情况下都会选择2010 任何人都可以指出我做错了吗？

Answer 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

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

}）;

Jquery年度选择器未按预期工作

2 个答案: