首页 > 软件开发 > HTML >

js设置下拉框默认值

来源:互联网 2023-03-16 19:16:35 版权归原作者所有,如有侵权,请联系我们

在做页面开发时,我们很多时候会使用到下拉框控件的,在下拉框里,默认是第一个选项是它的默认值的。如果你想使用js来设置下拉框的默认值,怎么设置?我们来看一下。

4Ch办公区 - 实用经验教程分享!

4Ch办公区 - 实用经验教程分享!

方法/步骤

  • 1

    我们使用jquery来操作,因此先引入 对应的脚本文件。

    4Ch办公区 - 实用经验教程分享!

    4Ch办公区 - 实用经验教程分享!

    js设置下拉框默认值4Ch办公区 - 实用经验教程分享!

  • 2

    在html里,有一个select下拉框,下拉框里有三个选项。

    4Ch办公区 - 实用经验教程分享!

    4Ch办公区 - 实用经验教程分享!

    js设置下拉框默认值4Ch办公区 - 实用经验教程分享!

  • 3

    页面下方有一个按钮,按钮有一个click事件,用来设置下拉框的默认值的。

    4Ch办公区 - 实用经验教程分享!

    4Ch办公区 - 实用经验教程分享!

    js设置下拉框默认值4Ch办公区 - 实用经验教程分享!

  • 3本页面未经许可获取自百度经验
  • 4

    创建事件的方法,在方法里,我们先通过id获得下拉框。

    4Ch办公区 - 实用经验教程分享!

    4Ch办公区 - 实用经验教程分享!

    js设置下拉框默认值4Ch办公区 - 实用经验教程分享!

  • 5

    然后使用jquery的val方法来设置下拉框的值。输入默认值对应的value值就行了,比如要设置第二项为默认值,我们就传入对应的「百度知道」这个值。4Ch办公区 - 实用经验教程分享!

    js设置下拉框默认值4Ch办公区 - 实用经验教程分享!

  • 6

    运行页面,页面上的下拉框现在默认的值为第一项的值。

    4Ch办公区 - 实用经验教程分享!

    4Ch办公区 - 实用经验教程分享!

    js设置下拉框默认值4Ch办公区 - 实用经验教程分享!

  • 7

    点击按钮后,就会设置第二项为默认的值了。

    4Ch办公区 - 实用经验教程分享!

    4Ch办公区 - 实用经验教程分享!

    js设置下拉框默认值4Ch办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!4Ch办公区 - 实用经验教程分享!


    标签: HTMLJQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号