Jquery怎么获取select选中项 自定义属性的值

Jquery怎么获取select选中项 自定义属性的值,第1张

Jquery获取select选中项 自定义属性的值的方法:

示例代码

1、html代码:

<!DOCTYPE>

<html>

<head>

<meta >

#lili{font-weight:bold;color:red;}

</style>

</head>

<body>

<select id="mysel" title="选择提示">

<option>nba</option>

<option>fifa</option>

</select>

<script>

</script>

</body>

<html>

2、jquery代码获取自定义属性

使用attr(name)获取title值:

<script>

alert($("#mysel")attr("title"));

</script>

3、显示结果:

jquery获取select的值其实类似于获取其他表单的值,需要用到val()方法, 代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="//cdnbootcsscom/jquery/1111/jqueryjs"></script>

    <script>

        $(function(){

            $('btn-show')click(function(){

                alert($('#selector')val());

            });

        })

    </script>

</head>

<body >

    <button class="btn-show">点击显示select对应的值</button>

    <select name="select" id="selector">

        <option value="1">西瓜</option>

        <option value="2">梨</option>

        <option value="3">李子</option>

        <option value="4">菠萝</option>

        <option value="5">哈密瓜</option>

    </select>

</body>

</html>

// 这是取$("xxxx") 这个选择器选到的对象的value

$("xxxx")val();

// 这是向$("xxxx") 这个选择器选到的对象的value里赋值"test"

$("xxxx")val("test");

也就是说val();这个方法是双向的 能读数据能写数据

更多例子请看:>

这个规则适用很多方法

想系统学习jquery 请看:>

不需要重新刷新页面。新选中下拉列表(select)的选项(option)会触发change事件,即选择项改变事件,因此可以在change事件的响应函数中获取新选中option的value值,而不必要刷新页面。实例演示如下:

1、HTML结构

<select id="test" onchange="fun()">

<option value="option-A">option-A</option>  

<option value="option-B">option-B</option>

<option value="option-C">option-C</option> 

<option value="option-D">option-D</option>

</select>

2、javascript代码

function fun(){

var select = documentgetElementById("test");

alert(selectvalue);

}

3、效果演示

以上就是关于Jquery怎么获取select选中项 自定义属性的值全部的内容,包括:Jquery怎么获取select选中项 自定义属性的值、jquery怎么获得html select 值、jquery 怎么获取到VALUE值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9426051.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存