HTML中select标签jq获取选中的option的value及Text内容

最新推荐文章于 2025-04-24 09:24:19 发布

Vrai、

最新推荐文章于 2025-04-24 09:24:19 发布

阅读量1w

点赞数 1

分类专栏： H5

本文链接：https://blog.youkuaiyun.com/weixin_37937428/article/details/83787354

版权

H5 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何使用jQuery操作HTML中的Select元素，实现支付方式选择并调用不同接口的实战案例。通过具体代码示例，展示如何获取选中项的Value和Text，以及如何根据选择结果执行相应的业务逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML中select标签jq获取选中的option的value及Text内容

前言：自己独立开发了一个缴费系统，为了客户端体验效果更好，做的是前后端分离！

当用到select选项框时，区分支付方式,调用两个不同的接口

直接上代码
html



<div class="form-group">

    <label>支付方式</label>

    <select class="form-control" id="myselect">

        <option value="1">银行卡</option> <!--给select 的option标签赋值，方便区分-->

        <option value="2">余额</option>

    </select>

</div>

js部分


     var opt=$("#myselect").val();//声明的获取id的值是select的值也就是option标签里的value

     $('#myselect').change(function () {

        if(opt === '1'){

            //当select的选项为1时,执行的js方法

            $('#hxPay').show();

        }else {

            $('#hxPay').hide();

        }

    });



    if(opt == '1'){

            window.location.href='https://mp.youkuaiyun.com';//select值选项为1时

        }

        if(opt == '2'){
            {
                $.ajax({

                    url: "{:U('Product/add')}",

                    type: 'post',

                    dataType: 'json',

                    data: data,

                    success: function (res) {

                        if(res.status == 0){

                            $("#message").show().html("余额不足,3秒后前往充
值!").fadeOut(3000,function () {

                                window.location.href='/About/add.html'

                            });

                        }else {

                            $("#message").show().html("缴费成功").fadeOut(3000,function () {

                                window.location.href='/About/index.html'

                            });

                        }

                    },

                    error: function () {

                    }

                });

            }

        }