`

动态增加input，下拉框，onchange事件

 
阅读更多

 

<html>

 

<head>

<script>

function $G(v){return document.getElementById(v);}

function _dynadd(parentID,inputFileID, maxNum){

/**if (maxNum > 0) {

x=document.getElementsByName(inputFileID);

y=x.length;

if (y >= maxNum) {

alert('最多只允许添加' + maxNum + '个');

return false;

}

}**/

var parent=$G(parentID);//获取父元素

 

var div=document.createElement("div");//创建一个div容器tb用于包含input file

var x=parseInt(Math.random()*(80-1))+1;

var divName=inputFileID+x.toString();//随机div容器的名称

div.name=divName;

div.id=divName;

//创建input

var aElement=document.createElement("input"); 

aElement.name=inputFileID;

aElement.id=inputFileID+x+x;

aElement.type="text";//设置类型为file

aElement.className = "dynInputLen";

aElement.style.height="20";

aElement.style.width="220";

aElement.style.fontSize="15";

//创建select

var itemSelect = document.getElementsByName("itemSelect")[0];

var selElement=document.createElement("select"); 

selElement.name=itemSelect.name;

selElement.id=itemSelect.name+x;

for(var i=0;i<itemSelect.options.length;i++){

var value=itemSelect.options[i].value;

var text=itemSelect.options[i].text;

selElement.options.add(new Option(text,value));

}

selElement.style.width="70";

//动态加载onchange事件

if(window.addEventListener) // Mozilla, Netscape, Firefox 

{

selElement.addEventListener('change', mychange,false); 

}

else// IE 

{ 

selElement.attachEvent('onchange',function(){

var selObj = $G(selElement.id);

var index = selObj.selectedIndex;

var str = selObj.options[index].text;

$G(aElement.id).value=str;

}); 

} 

/**var delBtn=document.createElement("input");//再创建一个用于删除input file的Button

delBtn.type="button";

delBtn.value=" ";

delBtn.className = "btn_del";

delBtn.onclick=function(){ removeInput(parentID,divName)};//为button设置tbonclick方法

**/

div.appendChild(aElement);//将input file加入div容器

div.appendChild(selElement);

//div.appendChild(delBtn);//将删除按钮加入div容器

parent.appendChild(div);//将div容器加入父元素

}

function changeItem(obj,param){

var index = obj.selectedIndex;

var str = obj.options[index].text;

$G(param).value=str;

}

</script>

</head>

<body>

<div align="left"  id="dynadd" width="53%">

<input id="scheduleContent" name="scheduleContent"  notnull="事项必须填写" style="height:20;width:220;font-size:15"/><select name="itemSelect" id="i1" style="width:70" onchange="changeItem(this,'scheduleContent')"><option>开会</option> <option>addf</option> </select> <br>

<input id="scheduleContenta" name="scheduleContent" style="height:20;width:220;font-size:15"/><select name="itemSelect" id="i2" style="width:70" onchange="changeItem(this,'scheduleContenta')"><option>开会</option><option>sdf</option></select>

</div>

<button style="position: top: 65px; right: 60px;cursor: hand; disabled:false;height:50;"  onClick="_dynadd('dynadd','scheduleContent','3')">增加一行 </button>

 

</body>

</html>

分享到：
| DatePicker功能及示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在这个实例中，我们将深入探讨 EasyUI 中的两个重要组件：`easyui-textbox` 和 `easyui-combobox`，以及它们的 `onchange` 事件响应。 `easyui-textbox` 是一个基础输入框组件，它扩展了原生 HTML 的 `input` 元素...

    解决layui中onchange失效以及form动态渲染失效的问题

    最近在使用layui框架做城市的三级级联的时候，发现jquery中的onchange事件方法在layui框架中失效了。 然后浏览layui社区，了解到layui监控一个控件变化有自己的方法。 html &lt;select lay-filter=test&gt;&lt;/...

    原生js form表单美化插件表单元素input select下拉框

    3. 表单事件：如onsubmit（提交时触发）、onchange（元素值改变时触发）等，可以通过JavaScript进行响应处理。 二、input元素美化 1. CSS样式：通过设置input元素的CSS样式，如border、background-color、padding、...

    asp如何实现动态下拉菜单赋值给文本框

    无论是哪种方法，其核心都是利用JavaScript来监听特定事件，并在事件发生时执行相应的代码，从而实现动态赋值。这对于提高Web应用的用户体验和交互性具有重要意义。在实际开发中，合理运用这些技巧可以使Web界面更加...

    下拉框选择年月日代码

    ### 下拉框选择年月日代码解析 #### 一、概述 本文将详细介绍一个用于实现年、月、日三联动下拉框的HTML与JavaScript代码。该代码通过动态生成年份、月份及日期的下拉选项，并根据所选年份和月份自动调整日期范围...

    asp中,一个下拉框对应多个文本框动态显示数据库内容

    使用`onchange`事件监听下拉框的选择变化，触发JavaScript函数`showDetails()`。这个函数负责发送Ajax请求获取选定姓名的详细信息。 4. **Ajax请求**： `showDetails()` 函数可以使用jQuery的`$.ajax()`或原生的...

    下拉框可输入模糊查询，自动匹配

    在IT行业中，尤其是在前端开发领域，下拉框（Select）是一种常见的用户界面元素，用于提供一组预设选项供用户选择。然而，随着用户体验需求的提升，传统的静态下拉框已经不能满足所有场景，因此出现了“下拉框可输入...

    可输可选下拉框的3种实现方式

    当用户在输入框中输入内容时，可以通过JavaScript监听`onChange`事件，将下拉框选中的文本同步到输入框中。 ```html ;"&gt; ;width:18px;overflow:hidden;"&gt; ;margin-left:-100px;height: 19px;" name="maker" id=...

    简单实用的可编辑下拉框

    - **下拉框改变事件**：当下拉框的选择项发生改变时，更新输入框的值。 #### 三、代码解析 - **HTML结构**： ```html (this)" style="WIDTH:100px"/&gt; ``` - 这行代码定义了一个宽度为100像素的下拉框，当点击...

    Vue v-for中的 input 或 select的值发生改变时触发事件操作

    4. **`onchange`、`onblur` 和 `oninput` 事件的区别** - `onchange`：当输入框失去焦点（blur）且其值发生变化时触发。 - `onblur`：只要输入框失去焦点就会触发，无论值是否改变。 - `oninput`：实时触发，每当...

    js下拉选择框与输入框联动实现添加选中值到输入框的方法

    本文将详细介绍如何使用JavaScript中的onchange事件以及页面元素遍历的相关技巧来实现这个功能。 首先，让我们了解一下HTML代码中定义的下拉选择框和输入框的基本结构。在文档的body部分定义了一个select元素和一个...

    自定义多选下拉框标签

    4. 动态渲染选项：根据传入的参数动态生成选项列表，可能需要解析JSON数据或通过API请求获取。 三、参数调整与功能扩展 为了让自定义标签更具灵活性，我们可以通过传递参数来改变其样式和功能。常见的参数可能包括...

    可编辑下拉框

    // 定义下拉框的onchange事件逻辑 }; ``` #### 四、总结 通过以上分析可以看出，这个“可编辑下拉框”实现了基本的文本输入与下拉选项选择功能，但在实际应用中可能还需要进一步完善，例如添加更多的事件处理逻辑...

    能写能选择的下拉框

    2. **JavaScript onChange事件**：当用户更改下拉列表中的选择时触发此事件，常用于实现动态加载数据等功能。 3. **JSP（JavaServer Pages）**：一种基于Java的服务器端技术，用于生成动态Web页面。它允许开发者在...

    文本框与下拉框的结合

    - `onChange`事件监听器，用于检测下拉框的改变并更新文本框内容。 3. **CSS样式定制**： - 通过定位和尺寸调整实现下拉框与文本框的对齐和覆盖效果。 - 边框和溢出控制确保整体组件的外观一致性。 #### 示例...

    可编辑下拉框的2种实现方式

    这里，`&lt;select&gt;`元素的`onchange`事件会同步`&lt;input&gt;`元素的值，而`&lt;input&gt;`元素则被绝对定位在`&lt;select&gt;`元素之上，使得看起来像是一个可编辑的下拉框。 ### 方法二：JavaScript 实现 第二种方法是使用...

    jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

    1. 在JSP页面上创建下拉框，设置onChange事件。 2. 后台Service和DAO层处理数据，获取并处理一级菜单数据。 3. 实体类提供构造方法，确保数据正确映射。 4. 使用Ajax监听onChange事件，向服务器发送请求获取二级菜单...

    js实现Select下拉框具有输入功能的方法

    第一种方法是在HTML中直接添加一个隐藏的input元素，然后通过JavaScript给select元素添加一个onchange事件，当用户选择一个选项后，就将这个选项的值赋给隐藏的input元素。这样一来，用户在界面上输入的数据实际上是...

    JS Select下拉框(支持输入模糊查询)

    在这个例子中，`InputValue`函数监听输入框的输入事件，当用户输入字符时，遍历Select选项并根据用户输入进行模糊匹配。匹配的选项将被添加到一个显示区域，用户可以通过鼠标或键盘的上下键选择匹配项。当选定一个...

    vue自定义ComboBox下拉框多选组件.zip

    用途：一般用于系统管理中多选角色，涉及 1、css样式：flex布局，postion之absolute，relative，画三角形 2、input checkbox类型的 v-model 双向绑定 onchange事件 3、数组过滤及循环遍历 4、子组件向父组件传值

Magicbox
Global site tag (gtag.js) - Google Analytics