如何在js中获取下拉列表选择的值

如何在js中获取下拉列表选择的值,第1张

<script language="javascript">

function getselectvalue()

{

var rtl=documentgetElementById("rtl");

alert(rtloptions(rtlselectedIndex)value);

}

</script>

以楼上的数据来用

<select name="sel" id="rtl" >

<option>菜单一</option>

<option>菜单二</option>

<option>菜单三</option>

</select>

<input type="button" onclick="getselectvalue()" value="d出下拉列表的值" />

加分咯!很辛苦的

<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()); //显示值

});

思路:jquery 获取select多选下拉框所有选项的值,可以通过选取多选的数组进行循环判断即可。

方法如下:

function f(){

    var se = documentgetElementById("t");

    var s = [];

    for(i=0;i<selength;i++){

        if(seoptions[i]selected){

            spush(se[i]value);

        }

    }

    alert(s);

}

<select id="t" multiple="true">

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

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

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

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

</select>

<input type="button" value="确定" onclick="f()" />

如图所示

第一步,创建静态页面selecthtml,引入select2相关的css和js文件,并引入jQuery核心js,如下图所示:

第二步,在body标签内插入select元素,设置属性multiple和class,宽度为300px,如下图所示:

第三步,初始化select2插件,需要调用select2()方法,如下图所示:

第四步,为了演示获取下拉框值,这里利用button按钮点击事件,在select下方插入一个button按钮,如下图所示:

第五步,编写按钮点击事件,事件里获取多选下拉框值和文本内容,如下图所示:

6

第六步,在浏览器中进行预览,点击“取值”按钮,会看到打印下拉框选择的值和文字,如下图所示:

windowonload = function(){

2

3 //首先获得下拉框的节点对象;

4 var select = documentgetElementById("s1");

5

6 //1如何获得当前选中的值?:

7 var value = selectvalue;

8

9 //2如何获得该下拉框所有的option的节点对象

10 var options = selectoptions;

11 //注意:得到的options是一个对象数组

12

13 //3如何获得第几个option的value值比如我要获取第一option的value,可以这样:

14 var value1 = options[0]value;

15 //4如何获得第几个option的文本内容比如我要获取第一option的文本,可以这样:

16 var text1 = options[0]text;

17

18 //5如何获得当前选中的option的索引?

19 var index = selectselectedIndex;

20

21 //6如何获得当前选中的option的文本内容?

22 //从第2个问题,我们已经获得所有的option的对象数组options了

23 //又从第5个问题,我们获取到了当前选中的option的索引值

24 //所以我们只要同options[index]下标的方法得到当前选中的option了

25 var selectedText = options[index]text;

26 }

参考如下代码

$("select")val(); // 选中项目的value值

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

示例如下:

创建Html元素

请选择:

<select id="sel">

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

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

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

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

</select>

<input type="button" value="被选项目">

编写jquery代码

$(function(){

$("input")click(function() {

a = $("#sel")val();

b = $("#sel option:checked")text();

alert("被选项目的值:"+a+",被选项目的显示值:"+b+"。");

});

})

显示效果

以上就是关于如何在js中获取下拉列表选择的值全部的内容,包括:如何在js中获取下拉列表选择的值、利用JQuery动态获取下拉框的值,在jsp页面上显示。、jquery 怎样获取select多选下拉框所有选项的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存