如何获取select下拉框选中的的值呢

<select> 元素(下拉列表)

<select> 元素用于创建下拉列表;而<option> 元素用于定义列表中待选择的选项。列表通常会把首个选项显示为被选选项。

提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。

属性:

autofocus下拉列表在页面加载时自动获得焦点,是一个布尔属性;

disabled下拉列表应该被禁用,被禁用的下拉列表既不可用,也不可点击。比如你可以设置 disabled 属性,直到满足某些条件(比如选择一个复选框),才恢复用户对该下拉列表的使用。然后,可以使用 JavaScript 来移除 disabled 属性的值,以使下拉列表变为可用状态。

multiple :可同时选择多个选项。

name :下拉列表的名称。用于在 JavaScript 中引用元素,或者在表单提交后引用表单数据。

required :用户在提交表单前必须选择一个值。

size :下拉列表中可见选项的数目。如果 size 属性的值大于 1,但是小于列表中选项的总数目,浏览器会显示出滚动条,表示可以查看更多选项。

1. 如何设置默认选中呢 

设置默认选中可在option 中添加 selected = "selected",具体举例如下:

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

 2. 如何动态创建select对象呢?

(1)先动态创建select

① var mySel = document.createElement("select");    //创建select
② mySel.id = "citySel";                            //为select添加id
③ document.body.appendChild(mySel);		    //将select追加到body中
//创建select
② mySel.id = "citySel";                            //为select添加id
③ document.body.appendChild(mySel);		    //将select追加到body中

(2)动态创建option 

① var obj=document.getElementById('citySel');          //根据id查找对象

② obj.add(new Option("文本","值"));                    //添加一个选项
//根据id查找对象

② obj.add(new Option("文本","值"));                    //添加一个选项

3. 删除option 

(1)删除所有option 

① var obj=document.getElementById('citySel');               //获取select对象
② obj.options.length=0;	   			      //设置option的length为0
//获取select对象
② obj.options.length=0;	   			      //设置option的length为0

(2)删除某一个option 

① var obj=document.getElementById('citySel'); //获取select对象
//获取select对象
② var i=obj.selectedIndex;				      //i为要删除选项的下标(取当前选中选项的下标)
obj.options.remove(i); //调用remove方法

 4. 如何获取或者设置到相对应的值呢?

<select id="citySel" onchange="selChange()" class="select">
	<option value="">请选择城市</option>
	<option value="sh">上海</option>
	<option value="bj">北京</option>
	<option value="gz">广州</option>
	<option value="sz">深圳</option>
</select>

 方法一:javascript

1:获取select对象:
    var myselect=document.getElementById("citySel");

2:取到选中项的索引:
    var index = myselect.selectedIndex;// selectedIndex是所选中的项的index


3:获取选中项的value: 
    
    myselect.options[index].value;

4:取到选中项的文本内容:
    myselect.options[index].text;
    // selectedIndex是所选中的项的index

5:获取选中项的value:
    myselect.options[index].value;

6:取到选中项的文本内容:
    myselect.options[index].text;

 方法二:jquery

1:var options=$("#citySel option:selected");  //获取选中的option

2:options.val();   //拿到选中项的值,比如选中上海,获取的值为“sh”;

3:options.text();   //拿到选中项的文本,比如选中上海,获取的值为“上海”
//获取选中的option

2:options.val();   //拿到选中项的值,比如选中上海,获取的值为“sh”;

3:options.text();   //拿到选中项的文本,比如选中上海,获取的值为“上海”

 

 

 

  • 33
    点赞
  • 121
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值