填充下拉列表选择

时间:2013-09-18 07:47:52

标签: javascript jquery jquery-selectors

我遇到了一个问题,我有3个选择输入日期(日月)。我想使用相应的隐藏输入字段值填充它们。有没有人对如何使用jquery做一个好主意?

顺便说一句,一切都在同一个文件中,隐藏字段的值应该分别填充父母选中的框

<select class="day dateselect">
  <option>5</option>
  <option>6</option>
  <option>7</option>
</select>
<select class="month dateselect">
  <option data-date='1'>January</option>
  <option data-date='2'>February</option>
  <option data-date='3'>March</option>
</select>
<select class="year">
  <option>2010</option>
  <option>2011</option>
  <option>2012</option>
</select>
<input type="hidden" id="startDate" value="2010/1/18"/>

<select class="day dateselect">
  <option>17</option>
  <option>18</option>
  <option>19</option>
</select>
<select class="month dateselect">
  <option data-date='1'>January</option>
  <option data-date='2'>February</option>
  <option data-date='3'>March</option>
</select>
<select class="year">
  <option>2010</option>
  <option>2011</option>
  <option>2012</option>
</select>
<input type="hidden" id="endDate" value="2011/3/19"/>

<select class="day dateselect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select class="month dateselect">
  <option data-date='1'>January</option>
  <option data-date='2'>February</option>
  <option data-date='3'>March</option>
</select>
<select class="year">
  <option>2010</option>
  <option>2011</option>
  <option>2012</option>
</select>
<input type="hidden" id="birthDate" value="2010/1/1"/>

感谢。

1 个答案:

答案 0 :(得分:0)

获取每个隐藏输入的值,拆分它并设置前面元素的值:

$('input[type="hidden"]').each(function(_,el) {
    var date = el.value.split('/');
    $(this).prevAll('.day').first().val(date.pop());
    $(this).prevAll('.month').first().find('option[data-date="'+date.pop()+'"]').prop('selected',true);
    $(this).prevAll('.year').first().val(date.pop());
});

FIDDLE