- 浏览: 242191 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
thepastsee:
304572183股票交流 欢迎加入
实时股票 -
345161974:
很不错,我第一个接触的CSS卡片布局效果,多谢
css卡片效果
js 操作select 大全
1判断select选项中 是否存在Value="paraValue"的Item
2向select选项中 加入一个Item
3 从select选项中 删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item 为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9 得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项
document.all.objSelect.options.length = 0;
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/yulu0214/archive/2008/12/10/3488325.aspx
1判断select选项中 是否存在Value="paraValue"的Item
2向select选项中 加入一个Item
3 从select选项中 删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item 为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9 得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项
document.all.objSelect.options.length = 0;
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/yulu0214/archive/2008/12/10/3488325.aspx
发表评论
-
jquery_easyui
2012-01-18 10:06 822dfgdfsgs -
俄罗斯方格——转 javaeye
2012-01-16 11:59 853sdfasdfas -
网站模板_down
2012-01-05 14:15 694xcfadfasdf -
命名规则有利于SEO
2011-12-13 14:00 809转转转 命名规则有利于SEO ... -
ff_chm
2011-10-21 12:47 641sadasdasd -
精通javascript 代码
2011-08-24 17:35 750download download -
escape encodeURI 和encodeURIComponent_转
2011-06-21 17:11 814http://blog.csdn.net/redbednil/ ... -
javascript 讲义_01_事件结束
2011-06-19 09:50 626iiui -
js 验证非常好_转
2011-06-12 08:47 873http://justshare.iteye.com/blog ... -
jquery_demo_ff_bug_xpi
2011-05-26 12:33 655kjkjkj -
netmeetine_
2011-05-17 17:30 687kljlojlkjlkj -
javascript_简洁验证表单
2011-03-31 19:48 699ljkljk -
fck_精简版
2011-03-20 17:13 1057,jkjm -
css_div_灯箱效果
2011-03-05 16:32 858;lk;lk;lk -
QQ空间_html
2011-02-16 12:40 1162dgdgdg -
javascript_优化
2011-02-14 12:49 824Javascript常用优化方法 ... -
ext_p入门___:)
2011-02-05 12:08 645http://www.iteye.com/topic/1799 ... -
dangdang网_html
2011-01-18 00:07 778大家很努力,结果很不错 :) -
jquery_入门实例
2011-01-07 18:36 580kjlkjkl -
ajax_入门实例_
2011-01-07 18:29 575fwerwer
相关推荐
根据给定的信息,本文将对JavaScript操作`<select>`元素的方法进行详细介绍,这些方法涵盖了创建、选择、删除选项等操作。 ### 1. 检查`<select>`元素是否存在值为`paraValue`的项 ```javascript function ...
这篇博客 "[转]Jquery操作select 收藏" 可能是博主分享的一个关于如何使用jQuery高效地操作HTML中的<select>元素的教程。在网页设计中,select元素常用于创建下拉菜单,让用户从预设的选项中选择一个或多个值。 ...
总结起来,`js`加载`select`项是一项基础的前端技术,而`JSelect`则通过JavaScript为`select`元素提供了丰富的自定义样式和交互功能,极大地提升了用户体验。在实际项目中,结合这两者可以构建出既实用又美观的下拉...
4. **自定义日期选择器**:如果"dateSelect"是一个自定义组件,那么它可能包含CSS样式和JavaScript逻辑,用于创建符合特定设计需求或功能扩展的日期选择器。 5. **事件处理**:日期选择器通常会监听用户的操作,...
例如,使用Node.js的`mysql`库,你可以编写JavaScript代码来执行SQL语句,并获取受影响的行: ```javascript const mysql = require('mysql'); const connection = mysql.createConnection({ /* 连接配置 */ }); ...
在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...
下面将详细介绍 Bootstrap Select 的使用方法、核心功能以及与 JavaScript(js)和 CSS 的关联。 1. **安装与引入** 要使用 Bootstrap Select,首先确保你已经在项目中引入了 Bootstrap 的 CSS 和 JS 文件,以及 ...
首先,让我们了解JavaScript原生的方法来操作`select`和`option`。通过`document.getElementById('id')`或`document.querySelector('#id')`,你可以获取到对应的`select`元素。一旦有了引用,就可以使用`.options`...
在提供的压缩包文件中,包含了两个JavaScript文件:`jquery.editable-select.min.js` 和 `jquery.editable-select.js`。这两个文件是jQuery的一个插件——Editable Select。jQuery是一个广泛使用的JavaScript库,它...
`js` 目录则包含了 `SelectMenu.js` 相关的 JavaScript 文件。 总的来说,`SelectMenu.js` 是一个强大的 jQuery 下拉菜单插件,它以其简洁、易用和多样化的特性,为网页开发带来了更优的用户体验。无论是在简单的...
使用Select2非常简单,首先需要在页面中引入jQuery和Select2的JavaScript及CSS文件,然后通过简单的配置代码即可启用Select2。例如: ```html <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist...
《select2.js插件支持拼音搜索(最新版-4.0.6)Demo》 在当前的Web开发中,交互性和用户体验是至关重要的。为了提升这些方面,许多开发者选择使用JavaScript库来增强HTML元素,例如下拉选择框。select2.js就是其中...
2. **易用性增强**:在保持基本功能不变的基础上,`jQuery.selectlist.js`增加了诸如悬停效果、选中高亮、多选支持等功能,使得用户在操作下拉框时更加直观便捷。例如,鼠标悬停在选项上时,会突出显示当前项,增加...
"jQuery实现select样式美化 jQselect.js" 就是这样一种解决方案,它利用jQuery库来对传统的`<select>`标签进行样式定制,以提供更加丰富的视觉效果。 jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件...
在JavaScript中,我们可以通过DOM(Document Object Model)接口来操作这些元素。 要对`<select>`中的`<option>`进行排序,我们需要遵循以下步骤: 1. **获取`<select>`元素**:通过`document.getElementById`或`...
2. **初始化`select2`**:通过JavaScript调用`select2()`函数,将普通的`<select>`元素转换为`select2`选择器。 3. **配置参数**:`select2`提供了丰富的配置选项,例如设置搜索的最小字符数、多选的分隔符等,根据...
1. 引入依赖:首先,你需要在项目中引入jQuery库,然后下载或通过CDN引入`jQuery Nice Select`插件的JS和CSS文件。 2. 应用插件:在页面加载完成后,调用`$('select').niceSelect()`方法对需要美化的`<select>`元素...
在JavaScript(简称js)的帮助下,我们可以实现这些功能。本文将深入探讨如何利用JavaScript来增强`<select>`标签的搜索功能。 首先,我们需要了解基础的`<select>`结构。一个简单的`<select>`标签如下所示: ```...
《Select2 拼音检索功能详解》 在前端开发中,Select2 是一款非常流行的多功能选择器插件,它极大地扩展了HTML `<select>` 元素的功能,提供了丰富的定制性和用户体验。本文将深入探讨 Select2 的一个独特特性——...
【ySelect.js插件详解】 在前端开发中,选择器组件是常见的交互元素,用于实现用户多选功能。`ySelect.js`是一个基于jQuery的轻量级插件,旨在提供简单且实用的多选功能,它支持反选、搜索以及分组等特性,极大地...