`
haibin369
  • 浏览: 60094 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Javascript与jQuery操作<select/>

阅读更多

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();

 

分享到:
评论

相关推荐

    JQuery 年月日三级下拉框联动

    &lt;script src="JQSelect.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="SelectDate.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript" language="javascript"&gt; $(document).ready...

    Jquery操作select标签例子

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对`&lt;select&gt;`标签的操作。本文将详细讲解如何使用jQuery来管理HTML中的`&lt;select&gt;`元素,包括选择、更改选项,获取选中项的文本、值...

    下拉框代码 下拉框特效 jquery下拉框代码

    &lt;script type="text/javascript" src="../../../jquery/jquery-1.7.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.multiselect....

    select多选下拉列表+模糊查询功能.rar

    &lt;script type="text/javascript" src="jquery.combo.select.js" &gt;&lt;/script&gt; &lt;link rel="stylesheet" href="combo.select.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;select name="table_id" id="table_id"&gt; &lt;option value=""&gt;-...

    向元素中动态添加option

    这篇博客“向&lt;select&gt;元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下,实现在用户界面中动态地向`&lt;select&gt;`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言,它可以操作HTML元素,...

    jquery省市区县三级联动-支持预设默认值;

    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="area.js"&gt;&lt;/script&gt; &lt;script&gt; $(function(){ init("province","city","area"); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!...

    jquery表格插件及JavaScript选择框

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在本案例中,我们将探讨如何使用jQuery插件Datatables来改进表格,并结合JavaScript的选择框技术提升用户体验。 Datatables是一...

    jquery实现select互斥联动

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于...

    浮点vfdsfJAVA实现链表,双向链表.txtJAVA实现链表,双向链表.txt

    &lt;script type="text/javascript" src="/js/jquery.selectsort.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://www.csdn.net/js/jquery.form.js"&gt;&lt;/script&gt; &lt;script language='JavaScript' type='text/...

    ROS封UDP攻击.rar

    dsd ddddddd ccccccscript type='text/javascript' src="/ggmm/csdn_ggmm.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/js/jquery.js"&gt;&lt;/...&lt;script type="text/javascript" src="/js/jquery.selectsort.js"&gt;&lt;/

    jquery select插件带搜索框的下拉选择框代码

    &lt;title&gt;jQuery Searchable Select示例&lt;/title&gt; &lt;link rel="stylesheet" href="jquery.searchableSelect.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;select id="mySelect"&gt; &lt;option value="option1"&gt;选项1&lt;/option&gt; &lt;option value=...

    二级联动Jquery

    - **`change`事件**: 当用户更改域的内容时发生,通常用于`&lt;select&gt;`和`&lt;input&gt;`元素。 #### 三、代码解析 ##### 1. HTML结构 ```html &lt;select id="province"&gt; &lt;option&gt;----&lt;/option&gt; &lt;option&gt;&lt;/option&gt; ...

    jQuery ajax 多级联动 下拉框 Demo

    &lt;script type="text/javascript"&gt; $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: 'Id', // 绑定下拉框实际值的字段 nameKey: '...

    JQuery选择器

    //&lt;![CDATA[ $(document).ready(function(){ var $alltext = $("#form1 :text"); var $allpassword= $("#form1 :password"); var $allradio= $("#form1 :radio"); var $allcheckbox= $("#form1 :checkbox");...

    Jquery实现复选框反选

    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function selectAll(checkbox) { $('input[type=checkbox]').prop('checked', $...

    演示如何实现jquery的回调函数

    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#items').change(showItemInfo); }); function showItemInfo() { $('div#...

    Jquery多选文本框

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画效果等任务变得更加简单。当我们需要在网页上实现一个可多选的文本框时,jQuery提供了丰富的...

    jquery模拟select效果实现

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。在某些情况下,由于设计或交互需求,我们可能需要对原生的HTML元素进行自定义,例如模拟select下拉菜单的效果。...

    jQuery ui Combobox 扩展

    2. **HTML结构**:创建一个基本的`&lt;select&gt;`元素,并为其添加`id`以便于jQuery操作。 ```html &lt;select id="myComboBox"&gt; &lt;option value="option1"&gt;Option 1&lt;/option&gt; &lt;option value="option2"&gt;Option 2&lt;/option&gt;...

    jQuery手机下拉框select

    jQuery Mobile 提供了一个专门的 Select Menu 插件,用于将标准的HTML `&lt;select&gt;` 元素转换为适合触摸操作的、具有高级样式的菜单。这个插件自动应用到页面中的所有`&lt;select&gt;`元素,无需额外的JavaScript代码。你...

Global site tag (gtag.js) - Google Analytics