`
shaqiang32
  • 浏览: 105398 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

js添加,移除option

阅读更多

function addOptions(){
			   var dataType= document.getElementById("dataType").value;
			   var periodBeginTime= document.getElementById("periodBeginTime").value;
			   var periodEndTime= document.getElementById("periodEndTime").value;
			   if(dataType==1){
			       op="周末:"+periodBeginTime+"-"+periodEndTime;
			   }else{
			       op="节假日:"+periodBeginTime+"-"+periodEndTime;
			   }
			   
			  var opts = document.getElementById("periodList");
			   
              var objOption=document.createElement("OPTION");
              var valuetemp=dataType-periodBeginTime-periodEndTime;
              objOption.value=valuetemp;
              objOption.text=op;
              opts.add(objOption);
			   
			}
			
			function removeOptions(){
			 var opts = document.getElementById("periodList");
			 for(var i=opts.length-1;i>=0;i--){
			    if(opts.options[i].selected==true){
			      opts.options[i]=null;   
			    }
			 }
			}

<table width="100%">
											<tr>
												<td width="41%">

													<table width="266">
														<tr>
															<td width="258">
																时间类型:
																<select name="dataType" id=dataType>
																	<option  value="1"  selected="selected">
																		周末
																	</option>
																	<option  value="2">
																		节假日
																	</option>
																</select>
																&nbsp;
																<button type="" class="btn2" onclick="addOptions()">
																	添加
																</button>
															</td>
														</tr>
														<tr>
															<td>
																开始时间:
																<input type="text" name="periodBeginTime" size="5" id="periodBeginTime"
																	maxlength="10" value="" class="input-text" />
																(格式00:00)
																<br>
																结束时间:
																<input type="text" name="periodEndTime" size="5" id="periodEndTime"
																	maxlength="10" value="" class="input-text" />
															</td>
														</tr>
													</table>
												</td>
												<td width="56%">

													<table>
														<tr>
															<td align="left">
																<select size="6" id="periodList" multiple="multiple" >
																
																</select>
															</td>
															<td>
																<table>
																	<tr>
																		<td>
																			<img src="../images/edit.gif" />
																			编辑
																		</td>
																	</tr>
																	<tr>
																		<td>
																		 <a href="#" onclick="removeOptions()">
																			<img src="../images/del.gif" alt="删除用户" />
																			删除
																		 </a>	
																		</td>
																	</tr>
																</table>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>



分享到:
评论

相关推荐

    JS动态添加option和删除option(附实例代码)

    1.动态创建select 代码如下: ...添加选项option 代码如下: function addOption(){ //根据id查找对象, var obj=document.getElementById(‘mySelect’); //添加一个选项 obj.add(new Option(“文本”,”值”)); /

    Jquery遍历select option和添加移除option的实现方法

    在这篇文章中,我们将了解到如何使用JQuery来遍历select中的option,并实现添加和移除option的几种方法。 首先,我们来看一下如何遍历select中的option元素。在JQuery中,可以使用选择器来选中一个select元素,然后...

    js 操作select和option

    &lt;title&gt;JS 操作 Select 和 Option &lt;script language="JavaScript"&gt; function $(id) { return document.getElementById(id); } function show() { var selectObj = $("area"); var myOption = document....

    js select option

    JQuery提供了`.val()`方法来获取或设置选中的`option`值,以及`.append()`和`.remove()`方法来添加或移除`option`。 ```javascript var $selectBox = $('#mySelect'); $selectBox.append('&lt;option value="newValue...

    jquery动态添加option示例

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态添加和删除`&lt;option&gt;`元素。`&lt;option&gt;`元素通常用于`&lt;select&gt;`下拉列表,用于用户选择不同的选项。以下是对标题和描述中提及的...

    Jquery操作Select option整理

    ### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中,`&lt;select&gt;`元素...无论是遍历、添加还是移除 `&lt;option&gt;`,还是获取选中的值,jQuery 都能帮助我们轻松完成任务。希望本文档能为你的项目带来帮助!

    使用js对select动态添加和删除OPTION示例代码

    在这个场景中,我们关注的是如何使用JavaScript来动态地添加和删除`&lt;select&gt;`元素中的`&lt;option&gt;`选项。`&lt;select&gt;`元素通常用于创建下拉列表,而`&lt;option&gt;`则代表下拉列表中的可选项。 首先,让我们深入理解提供的...

    js 操作select与option(示例讲解)

    本文将详细介绍如何使用JavaScript来动态创建select元素,添加、删除、修改和获取option元素,以及获取选中项的值和文本。 首先,动态创建select元素可以通过使用document.createElement()方法来实现。该方法可以...

    jsp中两个框中内容互换可以添加也可以移除.docx

    这种操作常见于权限分配、角色选择等场景,允许用户在两个框之间灵活地添加和移除选项。在给定的文档中,描述了一个具体的例子,演示了如何实现在JSP中两个选择框(多选)之间的内容互换,并且可以添加或移除选项。 ...

    JS操作select下拉框动态变动(创建/删除/获取)

    标题所指的知识点是关于使用JavaScript来动态地操作HTML中的select下拉框元素,包括创建和删除select元素本身,以及对select元素中的option选项进行添加、删除、获取和修改等操作。以下是各知识点的详细说明: 1. ...

    javascript 删除select中的所有option的实例

    ### 方法二:移除后添加新option法 第二种方法是将需要删除的select中的所有option移动到另一个select元素中,或者直接创建新的option元素并替换原有的option。这种方法的优点是不需要逐个删除,而是直接替换原有...

    JS 通过系统时间限定动态添加 select option的实例代码

    如果当前月份大于5且日期大于1,那么向`myselect2`添加一个新选项"2016级",并将原有的第五个选项(在JavaScript中,数组的索引是从0开始的,所以索引5对应的是第六个元素)移除。同样的,如果当前月份大于7且日期...

    jQuery 操作Option.rar

    这可能涉及到`detach()`方法(移除元素但保持其数据和事件)和`append()`、`prepend()`、`insertBefore()`、`insertAfter()`等方法(在DOM树中添加或移动元素)。 2. **全选和单选移动**:代码可能提供了全部移动...

    两个select之间option的互相添加操作(jquery实现)

    "move"表示移动操作,即选中的option将从源select中移除,并添加到目标select中;"append"表示复制操作,即选中的option被复制到目标select中,但源select中仍然保留。 4. 选项的判断和操作 对于目标select中已存在...

    JavaScript Select和Option列表元素上下左右移动

    这个函数将当前选中的 Option 元素从左侧列表中移除,并将其添加到右侧列表中。 4. 实现多选功能 在这个资源中,我们还需要实现多选功能。这允许用户一次选中多个 Option 元素,并将其移到右侧列表中。 我们可以...

    html最全的js javascript操作select 下拉框

    此函数用于移除所有被选中的`&lt;option&gt;`。它遍历`&lt;select&gt;`中的所有选项,如果找到被选中的项,则将其删除。 ```javascript function selectOptionRemoveItem(oSelect) { if (oSelect.selectedIndex &gt; -1) { for ...

    js Select下拉列表框进行多选、移除、交换内容的具体实现方法

    文中提到了两个按钮,分别用于移除和添加选项,即实现交换功能。这里是一个可能的实现示例: ```javascript function removeSelectedOptions(selectObject) { let index = selectObject.selectedIndex; ...

Global site tag (gtag.js) - Google Analytics