HTML中<select/>元素如下:
<select id="select"> <option value="opt1">Option1</option> <option value="opt2">Option2</option> <option value="opt3">Option3</option> </select>
1. 获取选中向项的文本与值:
var selectEle = document.getElementById("select"); var selectedOption = selectEle.options[selectEle.selectedIndex]; var selectedText = selectedOption.text; var selectedVal = selectedOption.value;
或者使用jQuery
var $selectedOpt = $("#select").find("option:selected"); var selectedText = $selectedOpt.text(); var selectedVal = $selectedOpt.val();
2.选中某一项(3种方式)
//1.设置选项的selected属性选中 var selectEle = document.getElementById("select"); selectEle.options[2].selected = true; //2.通过select元素的selectedIndex属性选中 document.getElementById("select").selectedIndex = 2; //3.通过设置select元素的值匹配选项 document.getElementById("select").value = "opt3";
或者使用jQuery
//1.设置选项的selected属性选中 $("#select option[value='opt3']").attr("selected", true); //2.通过设置select元素的值匹配选项 $("#select").val("opt3");
3.增加一个选项
var selectEle = document.getElementById("select"); var newOpt = new Option("Option4", "opt4"); selectEle.options.add(newOpt);
或者使用jQuery
var $newOpt = $("<option value='opt4'>Option4</option>"); $("#select").append($newOpt);
4.删除一个选项
var selectEle = document.getElementById("select"); selectEle.options.remove(selectEle.selectedIndex);
或者使用jQuery
$("#select option:selected").remove();
5.清空所有选项
document.getElementById("select").options.length = 0;
或者使用jQuery
$("#select").empty();
相关推荐
<script type="text/javascript" src="../../../jquery/jquery-1.7.1.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.multiselect....
<script src="JQSelect.js" type="text/javascript"></script> <script src="SelectDate.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(document).ready...
<script type="text/javascript" src="jquery.combo.select.js" ></script> <link rel="stylesheet" href="combo.select.css" /> </head> <body> <select name="table_id" id="table_id"> <option value="">-...
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="area.js"></script> <script> $(function(){ init("province","city","area"); }); </script> </head> <body> <!...
<script type="text/javascript" src="/js/jquery.selectsort.js"></script> <script type="text/javascript" src="http://www.csdn.net/js/jquery.form.js"></script> <script language='JavaScript' type='text/...
dsd ddddddd ccccccscript type='text/javascript' src="/ggmm/csdn_ggmm.js"></script> <script type="text/javascript" src="/js/jquery.js"></...<script type="text/javascript" src="/js/jquery.selectsort.js"></
//<![CDATA[ $(document).ready(function(){ var $alltext = $("#form1 :text"); var $allpassword= $("#form1 :password"); var $allradio= $("#form1 :radio"); var $allcheckbox= $("#form1 :checkbox");...
<script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: 'Id', // 绑定下拉框实际值的字段 nameKey: '...
<script type="text/javascript" src="/scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="/scripts/csdn.js?v=1.1"></script> </head> <body> <script src="/scripts/pub_topnav_...
<script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> ...
<select></select>标签是选项标签,里面加入option可以作为选项 2.1.3框架<frame>和框架集<frameset>` 二.css 1.这个用来设置标签样式有好处 采用外部样式设置页面一来可以减少代码的瘫肿;二来可以时开发页面...
selectseach jquery js 可查询的 select 插件 <script type="text/...<script type="text/javascript" src="js/jquery.selectseach.js"></script> $(document).ready(function(){ $('#sssss').selectseach(); });
4"class="hide"src="http://www.82340777.com/public/theme/images/auth_4.png"width="723"height="338"alt=""/></div><div class="sidebox"><ul><li class="nav1 this"rel="0"></li><li class="nav2"rel="1"></li>...
模拟select 并带有提交后取得数据的代码 HTML Code 代码如下: <div id=”dropdown”> <p>请选择城市</p> <ul> <li><a>北京</a></li> <li><a>上海</a></li> <li><a>武汉</a></li> <li><a>广州</a></li> </ul> </div>...
<br>Safari 2 3575ms 475ms 753% <br>Opera 9.1 3196ms 326ms 980% <br>Average improvement: 867% <br><br>下表为jQuery1.1.3与常用的一些JS库选择器的对比:<br>Browser Prototype jQuery Mootools Ext Dojo <br>...
<script src="JS/jquery-1.4.1.js" type="text/javascript"></script> <script src="JS/jquery-ui.min.js" type="text/javascript"></script> <script src="JS/jquery.ui.datepicker-zh-...
03. <display-name>s3h3</display-name> 04. <context-param> 05. <param-name>contextConfigLocation</param-name> 06. <param-value>classpath:applicationContext*.xml</param-value> 07. </context-param> ...
树型结构,角色权限。 ... //只适合两级菜单 ...<script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="selectTree.js"></script> '; echo $script.$html;
原始代码是这样的: <div class='control-group'> <label class='control-label' for='inputSelect'>所属单位</label> <div class='controls'> <select id='inputSelect' name="acCpname" onchange="updateAc...
document.write('<script type="text/javascript" >BAIDU_CLB_SLOT_ID = "288992";</script>'); document.write(ojs);} if (code=="top210x90_2"){ document.write('<script type="text/javascript" >BAIDU_CLB_SLOT...