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 src="JQSelect.js" type="text/javascript"></script> <script src="SelectDate.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(document).ready...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对`<select>`标签的操作。本文将详细讲解如何使用jQuery来管理HTML中的`<select>`元素,包括选择、更改选项,获取选中项的文本、值...
<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 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="">-...
这篇博客“向<select>元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下,实现在用户界面中动态地向`<select>`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言,它可以操作HTML元素,...
<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> <!...
jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在本案例中,我们将探讨如何使用jQuery插件Datatables来改进表格,并结合JavaScript的选择框技术提升用户体验。 Datatables是一...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于...
<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"></
<title>jQuery Searchable Select示例</title> <link rel="stylesheet" href="jquery.searchableSelect.css"> </head> <body> <select id="mySelect"> <option value="option1">选项1</option> <option value=...
- **`change`事件**: 当用户更改域的内容时发生,通常用于`<select>`和`<input>`元素。 #### 三、代码解析 ##### 1. HTML结构 ```html <select id="province"> <option>----</option> <option></option> ...
<script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: 'Id', // 绑定下拉框实际值的字段 nameKey: '...
//<![CDATA[ $(document).ready(function(){ var $alltext = $("#form1 :text"); var $allpassword= $("#form1 :password"); var $allradio= $("#form1 :radio"); var $allcheckbox= $("#form1 :checkbox");...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> function selectAll(checkbox) { $('input[type=checkbox]').prop('checked', $...
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#items').change(showItemInfo); }); function showItemInfo() { $('div#...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画效果等任务变得更加简单。当我们需要在网页上实现一个可多选的文本框时,jQuery提供了丰富的...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。在某些情况下,由于设计或交互需求,我们可能需要对原生的HTML元素进行自定义,例如模拟select下拉菜单的效果。...
2. **HTML结构**:创建一个基本的`<select>`元素,并为其添加`id`以便于jQuery操作。 ```html <select id="myComboBox"> <option value="option1">Option 1</option> <option value="option2">Option 2</option>...
jQuery Mobile 提供了一个专门的 Select Menu 插件,用于将标准的HTML `<select>` 元素转换为适合触摸操作的、具有高级样式的菜单。这个插件自动应用到页面中的所有`<select>`元素,无需额外的JavaScript代码。你...