jquery如何获取一个select里面的所有option的值呢

jquery如何获取一个select里面的所有option的值呢,第1张

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml,并引入jquery。

2、在indexhtml中的<script>标签,输入jquery代码:。

var a = [];

$('option[selected="1"]')each(function () {

apush($(this)text())

});

$('body')append(ajoin(','));

3、浏览器运行indexhtml页面,此时被选出来的值被放入一个数组并打印了出来。

通过获取元素的text实现功能。关键的两个jquery函数为:

$("select")val();  // 选中项目的value值。$("select option:checked")text(); // 选中项目的显示值。

实例演示如下:

1、设计简单的一个下拉框代码,包括男女两个值。代码如下:

此时页面展示效果如下:

2、设计一个函数,通过点击按钮,将当前选中的下拉框的值和显示的文字,都选取出来,并分别赋值给两个input,函数代码如下:

此时,选取男,然后点击,展示效果如下:

如果选择女,展示效果如下:

扩展资料:

带有预先选定的选项的下拉列表:HTML <option> 标签的 selected 属性

定义和用法:

selected 属性规定在页面加载时预先选定该选项。被预选的选项会显示在下拉列表最前面的位置,也可以在页面加载后通过 JavaScript 设置 selected 属性。

实例:

<select>

<option>Volvo</option>

<option selected="selected">Saab</option>

<option>Mercedes</option>

<option>Audi</option>

</select>

<select id="selects">

<option value="0" selected>1</option>

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

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

</select>

<div id="result"></div>

--------------------------------------------------------

$("#selects")change(function(){ //下拉框改变时取得值

$("#result")html($(this)val()); //显示值

});

标签选择器:

选择input元素:

$("input")

选择select元素

$("select")

选择textarea元素

$("textarea")

比较基本的选择器还有ID选择器和类选择器,楼主可以去试试。

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、显示结果:

这个必须要在改变之前获取并保存,可以用变量保存起来,也可以直接附加在这个select标签上,如:

<select id="mysel">

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

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

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

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

</select>

<script type="text/javascript">

    var mysel = $("#mysel");

    myseldata("last", myselval())change(function () {

        //var mysel = $(this);

        var oldvalue = myseldata("last");//这次改变之前的值

        myseldata("last", myselval()); //每次改变都附加上去,以便下次变化时获取

        var newvalue = myselval(); //当前选中值

    })

</script>

本篇文章是关于jQuery对select的 *** 作进行了总结介绍 需要的朋友可以参考下  

//遍历option和添加 移除option function changeShipMethod(shipping){  var len = $("select[@name=ISHIPTYPE] option") length  if(shipping value != "CA"){   $("select[@name=ISHIPTYPE] option") each(function(){    if($(this) val() == ){     $(this) remove();    }   });  }else{   $("<option value= >UPS Ground</option>") appendTo($("select[@name=ISHIPTYPE]"));  } } //取得下拉选单的选取值 $( #testSelect option:selected ) text(); $("#testSelect") find( option:selected ) text(); $("#testSelect") val(); ////////////////////////////////////////////////////////////////// 记性不好的可以收藏下 下拉框: var cc    = $(" formc select[@name= country ] option[@selected]") text(); //得到下拉菜单的选中项的文本(注意中间有空格) var cc = $( formc select[@name="country"] ) val();   //得到下拉菜单的选中项的值 var cc = $( formc select[@name="country"] ) attr("id"); //得到下拉菜单的选中项的ID属性值 $("#select") empty();//清空下拉框//$("#select") ( ); $("<option value= > </option>") appendTo("#select")//添加下拉框的option

稍微解释一下: select[@name= country ] option[@selected] 表示具有name 属性 并且该属性值为 country 的select元素 里面的具有selected 属性的option 元素 可以看出有@开头的就表示后面跟的是属性

单选框: $("input[@type=radio][@checked]") val();   //得到单选框的选中项的值(注意中间没有空格) $("input[@type=radio][@value= ]") attr("checked" checked ); //设置单选框value= 的为选中状态 (注意中间没有空格)

复选框: $("input[@type=checkbox][@checked]") val(); //得到复选框的选中的第一项的值 $("input[@type=checkbox][@checked]") each(function(){ //由于复选框一般选中的是多个 所以可以循环输出    alert($(this) val());    });

$("#c ") attr("checked" );//不打勾 $("#c ") attr("checked" true);//打勾 if($("#c ") attr( checked )==undefined){} //判断是否已经打勾 当然jquery的选择器是强大的 还有很多方法 <script src=jquery js type=text/javascript></script> <script language="javascript" type=text/javascript> $(document) ready(function(){ $("#selectTest") change(function() {        //alert("Hello");        //alert($("#selectTest") attr("name"));        //$("a") attr("href" "xx ");        //window location href="xx ";        //alert($("#selectTest") val());        alert($("#selectTest option[@selected]") text());        $("#selectTest") attr("value" " ");

}); }); </script>

<a href="#">aaass</a> <! 下拉框 > <select id="selectTest" name=selectTest> <option value=" "> </option> <option value=" "> </option> <option value=" "> </option> <option value=" "> </option> <option value=" "> </option> <option value=" "> </option> </select> jquery radio取值 checkbox取值 select取值 radio选中 checkbox选中 select选中 及其相关获取一组radio被选中项的值 var item = $( input[@name=items][@checked] ) val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]") text(); select下拉框的第二个元素为当前选中值 $( #select_id )[ ] selectedIndex = ; radio单选组的第二个元素为当前选中值 $( input[@name=items] ) get( ) checked = true; 获取值 文本框 文本区域 $("#txt") attr("value") 多选框checkbox $("#checkbox_id") attr("value") 单选组radio $("input[@type=radio][@checked]") val(); 下拉框select $( #sel ) val(); 控制表单元素 文本框 文本区域 $("#txt") attr("value" );//清空内容                 $("#txt") attr("value" );//填充内容 多选框checkbox $("#c ") attr("checked" );//不打勾                 $("#c ") attr("checked" true);//打勾                 if($("#c ") attr( checked )==undefined) //判断是否已经打勾 单选组radio $("input[@type=radio]") attr("checked" );//设置value= 的项目为当前选中项 下拉框select $("#sel") attr("value" sel );//设置value= sel 的项目为当前选中项             $("<optionvalue= > </option><optionvalue= > </option>") appendTo("#sel")//添加下拉框的option             $("#sel") empty() //清空下拉框

lishixinzhi/Article/program/Java/JSP/201311/20142

以上就是关于jquery如何获取一个select里面的所有option的值呢全部的内容,包括:jquery如何获取一个select里面的所有option的值呢、如何通过JQUERY获得下拉框的显示值、利用JQuery动态获取下拉框的值,在jsp页面上显示。等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/web/9633375.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存