html对select标签实现数据动态增加，删除，修改功能。

最新推荐文章于 2024-09-10 10:55:09 发布
最新推荐文章于 2024-09-10 10:55:09 发布
阅读量7.3k 收藏 2
点赞数 1
分类专栏： js 文章标签： html input button function border xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wld1985/article/details/7071721
版权
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
function addtest()
{
 alert("test");
 var se = document.getElementById('sel');
 var a = document.getElementById('text1');
 se.options.add(new Option(a.value));
 document.getElementById('text1').value = "";
 document.getElementById('text1').focus();
 
 
}

function del()
{ 
 alert("del");
 var se = document.getElementById('sel');
 se.options.remove(se.selectedIndex);
 se.selectIndex=0;
}

function ccccc()
{
 document.getElementById('addnew').style.display="none";
 document.getElementById('changenew').style.display="block";
 var se = document.getElementById('sel');
 document.getElementById('oldinput').value = se.options[se.selectedIndex].text
}


function canceltest()
{
 document.getElementById('addnew').style.display="block";
 document.getElementById('changenew').style.display="none";
}


function changetest()
{
 alert("change");
 var newdate =document.getElementById('newinput').value;
 var se = document.getElementById('sel');
 se.options[se.selectedIndex].text = newdate;
 document.getElementById('addnew').style.display="block";
 document.getElementById('changenew').style.display="none";
 
 
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<div id="addnew" style="display:block">
  <table width="200" border="1">
    <tr>
      <td><label>
        <select name="select" id="sel" size="5" style="width:200px" multiple="multiple">
        </select>
        <input type="button" name="Submit2" value="cccccc" οnclick="ccccc()" />
        <input type="button" name="Submit3" value="del" οnclick="del()" />
      </label></td>
      <td><label>
        <input type="text" name="textfield" id ="text1"/>
      </label></td>
      <td><label>
        <input type="button" name="Submit" value="add" οnclick="addtest()"/>
      </label></td>
    </tr>
  </table>
  </div>
  <div id="changenew" style="display:none">
  <table width="272" height="44" border="1">
    <tr>
      <td><label>
        <input type="text" name="textfield2"  id="oldinput"/>
      </label></td>
      <td><label>
        <input type="text" name="textfield3" id="newinput" />
      </label></td>
      <td><label>
        <input type="button" name="Submit4" value="change" οnclick="changetest()" />
      </label>
        <label>
        <input type="button" name="Submit5" value="cancel" οnclick="canceltest()"/>
      </label></td>
    </tr>
  </table>
  </div>
  <p>&nbsp;</p>
  <label></label>
</form>
</body>
</html>

wld1985
关注
专栏目录
html query动态为select加入选项,HTML标签 select 里 动态添加option
weixin_29696999的博客
06-07 1532
HTML标签 select 里 动态添加option:☆ var today = new Date();var yearNow = today.getFullYear();var optiongYears_className = [yearNow, yearNow+1];var $selyear = $("select#classNameYear_add");$.each(optiongYe...
html中多选框list,HTML select多选框中动态添加或删除项（使用jQuery操作select多选框）...
weixin_32142107的博客
06-03 666
操作代码：HTML>select框操作functionaddSelect(){varoption=$('#option').val();vartext=$('#text').val();varitem=""+text+"";//option重复的重新添加$("#selectListoption[value='"+option+"']").remove();$('#sele...
html 关于select动态加载数据以及动态分组
最新发布
lfl18326162160的博客
09-10 744
muloptions[i].setAttribute("selected",true)//遍历字符串数组和复选框选择项，当有匹配的，就把该选项设置成已选择。//自定义下标放在最后新增，防止添加option时id增加。//获取复选框的选择项。//以,将selected字符创切割成字符串数组。//把创建optgroup新增到select下。//针对optgroup标签，添加它的option标签。//设置optgroup标签的label和id值。//js创建option标签。//js创建optgroup标签。
html select动态赋值
Luxika的专栏
11-21 1382
var positionIds = $("savePerformanceWorkflowExamineResearch_performanceWorkflowExamine_positionId"); positionIds.options.length = 1; positionIds.options[0].selected = "selected"; DWR...
html标签＜select＞ 动态加载 动态选中 不用jquery
weixin_43151193的博客
11-10 997
html标签 动态加载 动态选中 不用jquery 直接通过html来实现动态加载select以及根据传入值来预先动态选中。先直接上代码 <select class="wgt_txt_01"> <c:forEach items="${categoryList}" var="category" varStatus="status"> <c:choose> <c:when test="${category.name == instru
html动态编辑框
霖林烟雨
02-10 2525
简述： 随着在输入框中增加字符，动态矿高度增加（IE9及以上 chrome  firefox） 由于IE8 不支持oninput函数，所以不能实现此效果 事件函数： function feedDivOnInput(obj){ obj.style.height=30+'px'; obj.style.height=obj.scrollHeight+'px'; } fu
JS实现动态生成表格并提交表格数据向后端
11-24
对于表格的操作，我们还需要实现删除行、编辑行和保存更改的功能。例如，`removeTr(trNum)`函数会根据传入的行号删除相应的行；`editDataByOne(trNum)`函数切换输入框的只读状态，让用户可以编辑数据；而`saveByOne...
JQuery 操作select标签实现代码
10-29
使用JQuery来操作select标签，可以方便地实现下拉列表的动态添加、修改和删除选项，以及改变选中值等功能，从而提升用户体验。 首先，要操作select标签，我们需要了解JQuery选择器的使用方法，如何定位到特定的...
javascript对select标签的控制(option选项/select)
10-27
JavaScript 对于 HTML 中的 `select` 标签（在 ASP.NET 中对应的 `asp:DropDownList` 控件）提供了丰富的操作方法，使得我们可以方便地在前端实现动态交互和数据管理。以下将详细介绍 JavaScript 如何控制 `select` ...
JQuery实现动态表格点击按钮表格增加一行
10-25
在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...
antd表单数据 如何动态设置,React + antd 实现动态表单添加删除功能
weixin_33994072的博客
03-18 1800
类似下面这种功能：点击添加表增加一行，删除表删除一行，思路：将这个表单抽成一个单独的组件，维护一个时间戳数组，这个数组的作用就是通过map循环来生成动态表单，每次点击添加就在数组里添加一个时间戳。最终遍历有几个item就渲染几个表单。实现：dynamic.js 动态表单 子组件import React from 'react';import { Select } from 'antd';expor...
JS对HTML标签select的获取、添加、删除操作
12-10
代码如下: <SELECT NAME=”aaa” SIZE=”” style=”width:200px” > <OPTION VALUE=””>(空)</OPTION> <OPTION VALUE=”1″>1</OPTION> </SELECT> 代码如下: //获得html控件 var select = document.getElementsByName(“aaa”)[0]; select.selectedIndex = index; //创建新的Option对象 new Option(text,value) new option(text,value,defaultSelected,
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
Html 中的select标签动态生成
夕阳最温柔的专栏
01-03 2881
以下是3种动态生成的方法 New Document body{font-family:Courier New, Courier}select{font-size:8pt;font-family:Courier New, Courier}input{font-size:8pt;font-family:Courier New, Courier}JavaScript">var opttext= new
html动态追加元素,HTML5实现动态添加和删除元素
weixin_36303045的博客
06-01 1277
HTML5实现动态添加和删除元素，其中最主要的是进行ID的赋值操作，每次添加相对应的ID需要进行加1，在删除时，通过ID除过来相关的ID进行删除；还有就是删除最后一个添加的元素时，再次追加时的ID判断，这里使用的方式如下：在删除元素之后，查询DIV下追加的共同元素的个数，然后取最后一个ID，在其后进行追加相关的元素，具体实现如下：删除在ul下增加li控件，点击添加按钮。varid=2;fun...
html超出的子集出现下拉,select(下拉列表框)动态添加子集
weixin_42500720的博客
06-04 277
//创建一个空的select//页面加载时动态获取数据以及添加到创建的select$(document).ready(function(){var sHtml = ‘请选择民情类型‘;$.ajax({async: false,//闭关异步，改为同步url: "peoplereport!getReportType",type: "get",data: "bqzt=AA0001",dataType: ...
html动态加载select标签的option项（ASP.NET）
yang201610的博客
04-03 5325
最近做项目需要动态改变select标签的option项，然而我发现：html中select标签的“onclick”，“onload”、“onmousedown”等动作属性都不能达到预期的效果。于是想到2种解决方法： 1、在body标签中添加“onload”事件属性，然后用JavaScript动态改变option选项。 （1）添加选项option function addOption(){
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值