Question

如果在jquery中使用.attr（）选择下拉选项，如何在文本中自动显示日期？

这是我的HTML代码：

<span  ng-class="{{className [$index]}">{{ item.name}}</span>

Jquery：

<select id="time">
<option day="M-W-F">07:00 - 08:00 am</option>
<option day="T-Th">08:30 - 10:00 am</option>
<option day="Saturday">7:00 - 10:00 am</option>
</select>

<input type="text" id="day" placeholder="Day" />

Answer 1

您需要将值传递给.val()方法并使用:selected定位所选option，然后使用.attr()

$("#day").val($("#time option:selected").attr('day'))

我建议您使用data-*自定义属性来存储任意数据

＆＃13;

$("#time").on('change', function() {
  $("#day").val($("#time option:selected").data('day'))
}).trigger('change');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="time">
<option data-day="M-W-F">07:00 - 08:00 am</option>
<option data-day="T-Th">08:30 - 10:00 am</option>
<option data-day="Saturday">7:00 - 10:00 am</option>
</select>

<input type="text" id="day" placeholder="Day" />

＆＃13;

Answer 2

附加说明

因为：selected是jQuery扩展而不是CSS的一部分规范，查询使用：选中不能利用本机DOM querySelectorAll（）提供的性能提升方法。使用时达到最佳性能：选择以进行选择元素，首先使用纯CSS选择器选择元素使用.filter（＆＃34;：选择＆＃34;）。

jquery的

<script>
$(document).ready(function(){
  $("#time").on('change', function(){
     $("#day").val($("#time option:selected").attr('day'))
   })
})
</script>

如何通过下拉菜单自动设置文本字段中的值？

2 个答案: