Jquery 如何使用下拉菜单自动设置文本字段中的值？

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

这是我的HTML代码：

<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" />

上午7:00-08:00
上午8:30-10:00
上午7:00-10:00

Jquery：

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

$（文档）.ready（函数（）{
$（“#time”）.on（'change'，function（）{
$（“#day”）.val（）==$（“#time”）.val（）.attr（'day'）；
})
})

您需要将值传递给

.val（）

方法并使用

：selected

以选定的

选项为目标，然后使用
.attr（）

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


$（“#时间”）.on（'change'，function（）{
$（“#天”）.val（$（“#时间选项：选中”）.data（'day'））
}).触发（“变更”）

上午7:00-08:00
上午8:30-10:00
上午7:00-10:00
您需要将值传递给
.val（）
方法并使用
：selected
以选定的
选项为目标，然后使用
.attr（）

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


$（“#时间”）.on（'change'，function（）{
$（“#天”）.val（$（“#时间选项：选中”）.data（'day'））
}).触发（“变更”）

上午7:00-08:00
上午8:30-10:00
上午7:00-10:00
附加说明

因为：selected是jQuery扩展，而不是CSS的一部分
规范，查询使用：selected不能利用
本机DOM querySelectorAll（）提供的性能提升
方法。要在使用时获得最佳性能：selected可选择
元素，首先使用纯CSS选择器选择元素，然后
use.filter（“：selected”）

jquery

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


$（文档）.ready（函数（）{
$（“#time”）.on（'change'，function（）{
$（“#天”）.val（$（“#时间选项：选中”）.attr（'day'））
})
})
附加说明

因为：selected是jQuery扩展，而不是CSS的一部分
规范，查询使用：selected不能利用
本机DOM querySelectorAll（）提供的性能提升
方法。要在使用时获得最佳性能：selected可选择
元素，首先使用纯CSS选择器选择元素，然后
use.filter（“：selected”）

jquery

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


$（文档）.ready（函数（）{
$（“#time”）.on（'change'，function（）{
$（“#天”）.val（$（“#时间选项：选中”）.attr（'day'））
})
})
对于
数据
属性有很好的建议。我想就这个问题发表评论^^。太棒了。谢谢，先生。关于
数据
属性的建议很好。我想就这个问题发表评论^^。太棒了。谢谢你，先生。