html中select结合js的使用简介

最新推荐文章于 2024-08-22 10:01:24 发布
最新推荐文章于 2024-08-22 10:01:24 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： CSS HTML JavaScript 文章标签： html function div button input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xddouble/article/details/1680495
版权
JavaScript 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
HTML
6 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏

//作用:
1.提供select的拷贝;
2.选择select1时动态选择添加select2中的值(值来源于:selectTotal).
//addedby: xufl
//addeddate:20070706
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
<!--
/*清空select所有option项*/
function clear()
{
 var obj = document.getElementById('select2');
 var length = obj.length;
 for (var j=length-1; j>=0; j--)
 {
  obj.options.remove(j);
 }
}
/*拷贝select1的option到select2中*/
function copy()
{
 var obj = document.getElementById('select1');
 var obj2 = document.getElementById('select2');
 clear();
 /*拷贝select1到select2中*/
 for (var i=0;i<obj.options.length ;i++ )
 {
  var oOption = document.createElement("OPTION");
  obj2.options.add(oOption);
  oOption.innerText = obj.options[i].innerText;
  oOption.value = obj.options[i].value;
 } 
}
//选取配套值
function selectV()
{
 var obj2 = document.getElementById('select2');
 var key = document.getElementById('select1').value;
 var source = document.getElementById('selectTotal');
 if (key!="")
 {
  clear();
  /*拷贝selectTotal中相关记录到select2中*/
  for (var i=0;i<source.options.length ;i++ )
  {
   var str = source.options[i].value;
   if(key == str.substring(0,str.indexOf('.')))
   {
    var oOption = document.createElement("OPTION");
    obj2.options.add(oOption);
    oOption.innerText = source.options[i].innerText;
    oOption.value = source.options[i].value;
   }
  }    
 }
}
//-->
</script>
</HEAD>

<BODY>
<form name="musicForm">
 <strong>Select Copy</strong><hr>
 Select1:
 <select id="select1" onChange="selectV()">
 <option value="">
 <option value="key1">key1text
 <option value="key2">key2text
 <option value="key3">key3text
 <option value="key4">key4text
 </select>
 <p>
 Select2:
 <select id="select2">
 </select>
 <p>
 <input type="button" value="Copy Select's Options" onClick="copy()">
 <p>
 <!--用于提供选项资源-->
 <!--
  div层使用说明:

  　div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

　　style="visibility: none;"

　　document.getElementById("typediv1").style.visibility="hidden";//隐藏

　　document.getElementById("typediv1").style.visibility="visible";//显示

　　通过设置display属性可以使div隐藏后释放占用的页面空间，如下

　　style="display: none;"

　　document.getElementById("typediv1").style.display="none";//隐藏

　　document.getElementById("typediv1").style.display="";//显示

 -->
 <div style="visibility: hidden;">
 <select id="selectTotal" >
 <option value="key1.1">key1.text1
 <option value="key2.1">key2.text1
 <option value="key3.1">key3.text1
 <option value="key4.1">key4.text1
 <option value="key1.2">key1.text2
 <option value="key2.2">key2.text2
 <option value="key3.2">key3.text2
 <option value="key4.2">key4.text2
 <option value="key1.3">key1.text3
 <option value="key2.3">key2.text3
 <option value="key3.3">key3.text3
 <option value="key4.3">key4.text3
 </select>
 </div>
</form>
</BODY>
</HTML>
 

xddouble
关注
专栏目录
html最全的js javascript操作select 下拉框
10-25
html最全的js javascript操作select 下拉框
select2.sortable:结合 select2 和 html5sortable 排序多选择列表真棒！
06-20
要使用`select2.sortable`，首先确保在你的项目中引入了`select2`和`html5sortable`的JavaScript和CSS文件。然后，你需要将`select2`应用到你的`<select>`元素上，接着为这个元素添加`data-sortable`属性，以启用`...
开源项目 `select.js` 使用教程
最新发布
gitblog_00047的博客
08-22 851
开源项目 select.js 使用教程 selectStyleable select elements built on Tether. #hubspot-open-source项目地址:https://gitcode.com/gh_mirrors/se/select 项目介绍 select.js 是一个由 HubSpot 开发的开源项目，旨在提供一个简单而强大的自定义选择框组件。它基于 jQu...
整理发布html的select控件实用js操作
developer2016的博客
01-06 120
上 周在公司的erp项目中，将原来的商品分类（大类，一级分类和小类）改造成select控件的三级联动的效果（实际上笔者使用的是三个 DropdownList控件）。用到了select控件的插入和移除option的操作方法。根据笔者的经验，在实际项目中，select控件是经常要 用到的（当然包括DropdownList控件）。下面就整理发布一下select的一些常见js操作方法。贴代码...
html中select在js中的操作
风落的专栏
10-28 424
<br />//添加 <br />var Select1= document.getElementById("Select1"); <br />1.Select1.options[0]=new Option('a','0'); <br />或 <br />2.Select1.options.add(new Option('a','0')); <br />其中1的options[0]，0是索引，所以好一点 <br />//获取当前的value值 <br />var www=Select1.value; <br
js简单实现HTML标签Select联动带跳转
10-26
本例中通过JavaScript和HTML的结合使用，简单地展示了如何实现联动效果，并且能够根据选择的项进行页面跳转。 首先，我们从HTML结构开始分析。表单（FORM）中包含两个下拉列表（SELECT）元素，每个元素都绑定了一个...
三级下拉列表 select 网页 html5
03-29
在HTML5中，这种复杂的下拉列表通常结合`<select>`标签、JavaScript（JS）以及可能的CSS来实现。下面将详细介绍如何构建一个三级联动的下拉列表。 首先，我们要理解HTML5的`<select>`标签。`<select>`标签用于创建...
html js 用HashMap去掉html中select中的重复值
03-16
本文将探讨如何利用JavaScript和Java中的HashMap（在JavaScript中，我们可以使用类似的数据结构，如`Map`）来消除`<select>`中的重复值。 首先，让我们了解HashMap或Map数据结构。HashMap是Java中的一种集合类，它...
HTML中的select标签如何使用.docx
11-22
在HTML中，`<select>`标签通常与`<option>`标签配合使用，用于创建下拉列表。下面将详细介绍`<select>`标签的用法及其相关属性。 1. **基本用法** 创建一个简单的`<select>`标签，需要在`<select>`标签内部包含一...
JS对HTML标签select的获取、添加、删除操作
10-26
HTML标签中的select在使用过程中很频繁，在本文将为大家介绍下使用js是如何操作的，下面有个不错的示例，感兴趣的朋友不要错过
html select 添加js,封装html的select标签的js操作实例
weixin_39520353的博客
06-19 448
复制代码 代码如下:function BindSelect(id,dataList,fieldtext,fieldValue) {//绑定某一个数据源，fieldtext为需要绑定的文本字段，fieldValue为需要绑定的value字段var select = $("#" + id)[0];for (var i = 0; i < dataList.length; i++) {select....
HTML中select标签单选多选详解
男儿当自强
04-03 1391
select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将  表单数据提交给服务器时包括 name 属性。 一、基本用法：   Volvo   Saab   Opel   Audi 其中，标签可以省掉，在页面中用法 SELECT NAME="studyCenter" id="studyCen
js操作HTML的select
weixin_33831196的博客
01-28 90
1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 ...
php下拉框js,js如何实现select下拉框选择
weixin_35662670的博客
03-10 193
首先来看一下效果图：(推荐教程：js教程)具体代码如下：自定义select*{margin: 0;padding: 0;}#main{position: relative;width: 280px;height: 42px;}#content{width: 280px;height: 42px;line-height: 42px;padding-left: 10px;background: rgb...
HTML 中 SELECT 选项分组
kemy88的专栏
01-26 2725
  选择排序/显示方式      按价格 从低到高    按价格 从高到低    按剩余时间 从少到多    按剩余时间 从多到少        列表方式    图片方式    纯文字方式        每页显示20个    每页显示40个    每页显示80个  纯属个人收藏。。 
HTML5 select控件详解与示例
总结起来，`<select>`控件是HTML中一个重要的交互元素，结合CSS和JavaScript可以实现丰富的用户界面。了解不同HTML版本的差异，以及如何处理图像格式和交互元素，对于前端开发来说是非常基础且重要的技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值