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>
<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>
分享到:
相关推荐
1.动态创建select 代码如下: ...添加选项option 代码如下: function addOption(){ //根据id查找对象, var obj=document.getElementById(‘mySelect’); //添加一个选项 obj.add(new Option(“文本”,”值”)); /
在这篇文章中,我们将了解到如何使用JQuery来遍历select中的option,并实现添加和移除option的几种方法。 首先,我们来看一下如何遍历select中的option元素。在JQuery中,可以使用选择器来选中一个select元素,然后...
<title>JS 操作 Select 和 Option <script language="JavaScript"> function $(id) { return document.getElementById(id); } function show() { var selectObj = $("area"); var myOption = document....
JQuery提供了`.val()`方法来获取或设置选中的`option`值,以及`.append()`和`.remove()`方法来添加或移除`option`。 ```javascript var $selectBox = $('#mySelect'); $selectBox.append('<option value="newValue...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态添加和删除`<option>`元素。`<option>`元素通常用于`<select>`下拉列表,用于用户选择不同的选项。以下是对标题和描述中提及的...
### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中,`<select>`元素...无论是遍历、添加还是移除 `<option>`,还是获取选中的值,jQuery 都能帮助我们轻松完成任务。希望本文档能为你的项目带来帮助!
在这个场景中,我们关注的是如何使用JavaScript来动态地添加和删除`<select>`元素中的`<option>`选项。`<select>`元素通常用于创建下拉列表,而`<option>`则代表下拉列表中的可选项。 首先,让我们深入理解提供的...
本文将详细介绍如何使用JavaScript来动态创建select元素,添加、删除、修改和获取option元素,以及获取选中项的值和文本。 首先,动态创建select元素可以通过使用document.createElement()方法来实现。该方法可以...
这种操作常见于权限分配、角色选择等场景,允许用户在两个框之间灵活地添加和移除选项。在给定的文档中,描述了一个具体的例子,演示了如何实现在JSP中两个选择框(多选)之间的内容互换,并且可以添加或移除选项。 ...
标题所指的知识点是关于使用JavaScript来动态地操作HTML中的select下拉框元素,包括创建和删除select元素本身,以及对select元素中的option选项进行添加、删除、获取和修改等操作。以下是各知识点的详细说明: 1. ...
### 方法二:移除后添加新option法 第二种方法是将需要删除的select中的所有option移动到另一个select元素中,或者直接创建新的option元素并替换原有的option。这种方法的优点是不需要逐个删除,而是直接替换原有...
如果当前月份大于5且日期大于1,那么向`myselect2`添加一个新选项"2016级",并将原有的第五个选项(在JavaScript中,数组的索引是从0开始的,所以索引5对应的是第六个元素)移除。同样的,如果当前月份大于7且日期...
这可能涉及到`detach()`方法(移除元素但保持其数据和事件)和`append()`、`prepend()`、`insertBefore()`、`insertAfter()`等方法(在DOM树中添加或移动元素)。 2. **全选和单选移动**:代码可能提供了全部移动...
"move"表示移动操作,即选中的option将从源select中移除,并添加到目标select中;"append"表示复制操作,即选中的option被复制到目标select中,但源select中仍然保留。 4. 选项的判断和操作 对于目标select中已存在...
这个函数将当前选中的 Option 元素从左侧列表中移除,并将其添加到右侧列表中。 4. 实现多选功能 在这个资源中,我们还需要实现多选功能。这允许用户一次选中多个 Option 元素,并将其移到右侧列表中。 我们可以...
此函数用于移除所有被选中的`<option>`。它遍历`<select>`中的所有选项,如果找到被选中的项,则将其删除。 ```javascript function selectOptionRemoveItem(oSelect) { if (oSelect.selectedIndex > -1) { for ...
文中提到了两个按钮,分别用于移除和添加选项,即实现交换功能。这里是一个可能的实现示例: ```javascript function removeSelectedOptions(selectObject) { let index = selectObject.selectedIndex; ...