html中select结合js的使用简介

最新推荐文章于 2022-05-31 19:39:31 发布
原创 最新推荐文章于 2022-05-31 19:39:31 发布 · 3.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #function #div #button #input

本文介绍了一个使用JavaScript实现的动态更新下拉列表的方法。当用户从第一个下拉列表中选择一个选项时，第二个下拉列表会根据所选选项自动填充相关联的选项。此外，还提供了一个复制功能，允许将第一个下拉列表的所有选项复制到第二个下拉列表中。

//作用:
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>
 

HTML中的select标签如何使用.docx
11-22
在HTML中，`<select>`标签通常与`<option>`标签配合使用，用于创建下拉列表。下面将详细介绍`<select>`标签的用法及其相关属性。 1. **基本用法** 创建一个简单的`<select>`标签，需要在`<select>`标签内部包含一...
JS对HTML标签select的获取、添加、删除操作
10-26
HTML标签中的select在使用过程中很频繁，在本文将为大家介绍下使用js是如何操作的，下面有个不错的示例，感兴趣的朋友不要错过
html最全的js javascript操作select 下拉框
10-25
html最全的js javascript操作select 下拉框
整理发布html的select控件实用js操作
developer2016的博客
01-06 156
上 周在公司的erp项目中，将原来的商品分类（大类，一级分类和小类）改造成select控件的三级联动的效果（实际上笔者使用的是三个 DropdownList控件）。用到了select控件的插入和移除option的操作方法。根据笔者的经验，在实际项目中，select控件是经常要 用到的（当然包括DropdownList控件）。下面就整理发布一下select的一些常见js操作方法。贴代码...
html中select在js中的操作
风落的专栏
10-28 471
<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
精选资源
select2.sortable:结合 select2 和 html5sortable 排序多选择列表真棒！
06-20
要使用`select2.sortable`，首先确保在你的项目中引入了`select2`和`html5sortable`的JavaScript和CSS文件。然后，你需要将`select2`应用到你的`<select>`元素上，接着为这个元素添加`data-sortable`属性，以启用`...
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 添加js,封装html的select标签的js操作实例
weixin_39520353的博客
06-19 528
复制代码 代码如下:function BindSelect(id,dataList,fieldtext,fieldValue) {//绑定某一个数据源，fieldtext为需要绑定的文本字段，fieldValue为需要绑定的value字段var select = $("#" + id)[0];for (var i = 0; i < dataList.length; i++) {select....
JS操作选中HTML ＜select＞ 标签
LAM LAB
05-31 486
需求：实现自动打卡的脚本中，无法模拟select标签点击，然后弹出option项。 解决：打卡信息的提交，本质是上传表单的过程。 故，换个思维方向，不通过模拟点击实现，自己创造行不行？本质也是触发后create。 那么思考提交的value的element是哪个？ 用于判断表格完整性的关键elemen又是哪个？ 经过摸索发现 // 既然不能点击弹出来，就自己create一个 document.getElementById("SELECT_1").options.add(new Option('广东省'
HTML中select标签单选多选详解
男儿当自强
04-03 1526
select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将  表单数据提交给服务器时包括 name 属性。 一、基本用法：   Volvo   Saab   Opel   Audi 其中，标签可以省掉，在页面中用法 SELECT NAME="studyCenter" id="studyCen
js操作HTML的select
weixin_33831196的博客
01-28 136
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 251
首先来看一下效果图：(推荐教程：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 2865
  选择排序/显示方式      按价格 从低到高    按价格 从高到低    按剩余时间 从少到多    按剩余时间 从多到少        列表方式    图片方式    纯文字方式        每页显示20个    每页显示40个    每页显示80个  纯属个人收藏。。 
HTML中结合使用select下拉框和input输入框
最新发布
07-17
在 HTML 中结合使用 `select` 下拉框与 `input` 输入框，可以通过多种方式实现功能和样式上的协同。以下是几种常见的方法： ### 1. 使用 `<datalist>` 实现可编辑的下拉框 通过 `<input>` 配合 `<datalist>` 可以创建一个既能手动输入又能选择预设选项的控件，类似于可编辑的下拉框[^1]。 ```html <input list="appNamelist" id="appName" name="appName" style="padding:0.5em; border-radius:10px;"> <datalist id="appNamelist"> <option value="WeChat(微信)"> <option value="QQ"> <option value="Google Talk"> <option value="Twitter"> <option value="Facekbook"> </datalist> ``` 这种方式的优势在于原生支持现代浏览器，并且用户既可以输入新内容，也可以从下拉列表中选择已有项。 --- ### 2. 将 `select` 的值同步到 `input` 框中 如果需要将 `select` 下拉框的选择结果动态传入 `input` 输入框中，可以使用 JavaScript 来实现数据联动[^2]。 ```html <select id="SS" onchange="updateInput()"> <option value="WeChat">WeChat</option> <option value="QQ">QQ</option> <option value="Google">Google</option> </select> <input type="text" id="box" /> <script> function updateInput() { document.getElementById('box').value = document.getElementById('SS').options[document.getElementById('SS').selectedIndex].value; } </script> ``` 此方法适用于需要将选择结果直接显示或用于后续处理的情况。 --- ### 3. 水平对齐 `input` 和 `select` 控件 为了确保 `input` 和 `select` 在页面布局中水平对齐，可以通过 CSS 设置统一的高度、宽度以及浮动属性来优化视觉效果[^3]。 ```html <div class="form-group"> <input id="aaaa" value="默认值" style="width: 300px; height: 35px; float: left;"> <select id="bbbb" style="width: 300px; height: 35px; float: left; margin-left: 20px;"> <option value="0" selected>请选择</option> <option value="1">选项一</option> <option value="2">选项二</option> </select> </div> ``` 该布局方式能有效避免控件之间出现错位问题，提高界面美观度。 --- ### 4. 综合示例：带标签和样式的组合控件 以下是一个完整的 HTML 示例，展示了如何将带有标签的 `input` 和 `select` 控件组合在一起，并设置基本的样式[^4]。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉框与输入框组合</title> </head> <body> <div class="form-container"> <label for="contact">联系方式:</label> <input id="contact" type="text" list="contactOptions" style="padding: 0.5em; border-radius: 10px;"> <datalist id="contactOptions"> <option value="WeChat(微信)"> <option value="QQ"> <option value="Google Talk"> <option value="Twitter"> <option value="Facekbook"> </datalist> </div> </body> </html> ``` 此结构适合用于表单中的信息采集场景，具有良好的交互性和兼容性。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值