<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript">
function test()
{
//（1）将所有option内容保存
var temp = document.getElementsByTagName("option");
var array = new Array(temp.length);
for (var i = 0, length= temp.length; i < length; i++){
array[i] = temp[i].innerText;
}
//（2）将所有相同的option内容去掉
var data={};
var desiredArr=new Array();
for(var i=0;i<array.length;i++){
data[array[i]]=array[i];
}
for(var pro in data){
desiredArr.push(data[pro])
}
//（3）删掉所有子节点
var parent = document.getElementById("test2");
//这里因为childNodes节点会动态变下标，所以用0的index实现全部删除
for (var i = 0, length= parent.childNodes.length; i < length; i++){
parent.removeChild(parent.childNodes[0]);
}
//（4）添加过滤后的子节点
for (var i = 0, length= desiredArr.length; i < length; i++){
var div_view=document.createElement("option");
var text = document.getElementById("test2");
div_view.innerText=desiredArr[i];
text.appendChild(div_view);
}
}
</script>
<body>
<fieldset>
<legend>DSAFSD</legend>
<textarea rows="10" cols="10" id="test"></textarea>
This is my JSP page. <br>
</fieldset>
<del>dadf</del>
<select id="testSelect" onfocus="test()" >
<optgroup label="default" id="test2">
<option>11</option>
<option>11</option>
<option>224</option>
</optgroup>
</select>
<textarea rows="10" cols="100" id="testread">testtesttest111</textarea>
</body>
</html>
分享到：
相关推荐
在JavaScript中，我们可以创建一个函数来处理`<select>`元素，去除重复的选项。首先，我们需要遍历`<select>`的所有`<option>`，并使用Map存储每个值出现的次数。 ```javascript function removeDuplicateValues...
在这个实现中，当用户在`<input>`中输入文本时，JavaScript会遍历`<select>`的选项并找到匹配的文本。如果用户按下回车键，JavaScript会模拟一个`<select>`的改变事件，这样可以触发任何与`<select>`改变相关的事件...
由于浏览器原生的 `<select>` 标签样式难以自定义，许多开发者会使用 JavaScript 库（如 Select2、Chosen 或 Selectize）来模拟自定义的下拉菜单。这些库通过替换原生元素并创建新的 HTML 结构，提供了更丰富的...
在HTML和JavaScript编程中，`<select>`元素用于创建下拉列表，经常需要进行动态操作，比如添加、删除、修改选项，以及选中和清空选中的值。本篇文章将探讨如何通过JavaScript来实现这些功能，并判断控件是否存在。...
然而，由于安全性和兼容性原因，直接修改`<select>`和`<option>`的样式在不同浏览器中的效果可能不一致。一种常见的解决方法是使用JavaScript库或CSS框架（如Bootstrap）来实现更复杂的样式。 三、自定义下拉列表 1...
6. **获取选中选项**：`getSelectedOptions`函数遍历所有的`<option>`元素，并将选中的项收集到数组中返回。 #### 总结 通过以上步骤，我们可以轻松地实现一个不依赖于Ctrl键的Multiple Select功能。这种方法不仅...
- `<select>` 创建下拉列表，`<option>` 为选项。 - `<textarea>` 创建多行文本输入框。 - `<input>` 可以有多种类型，如`type="checkbox"`创建复选框，`type="radio"` 创建单选按钮，`type="text"` 创建文本...
为了展示用户的选择，我们在页面上添加了一个文本输入框（`<input type="text" name="output">`），并编写了JavaScript函数`checkselect()`来获取用户选定的选项值，并将其显示在文本输入框中： ```javascript ...
在JavaScript中，我们可以通过`document.getElementById`方法获取到指定ID的`<select>`元素对象，然后通过遍历其`options`属性来获取选中的项。具体实现如下： ```javascript function GetValue() { var strlist =...
<option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> </select> </div> <script> function handleTextboxChange(target) { var...
这里的`<select>`标签定义了下拉框，每个`<option>`标签则表示下拉框中的一个选项，其`value`属性用于存储选项的值，而文本内容则作为显示的选项名称。 接下来是CSS部分，用于定制下拉框的外观。你可以通过选择器如...
这里的`#selectId`是select元素的ID，`find("option:selected")`用于找到当前被选中的`<option>`元素，然后调用`.val()`方法获取该选项的`value`属性值。 在提供的代码示例中，开发者使用了`attr("lang")`来获取...
在这个例子中，`<select>`元素定义了一个下拉菜单，其中包含三个选项。当用户改变下拉菜单的选择时，`onChange`事件被触发，执行`oclick`函数。`oclick`函数的作用是将下拉菜单的当前选中值赋给名为`a1`的文本框。...
程序中为了更美观会自动去掉新table上面和下面的边框，包括frame和style的： Code if(this._oTable.border > 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable...
- **`<option>`标签**: 下拉列表中的选项。 - **`<textarea>`标签**: 多行文本输入框。 示例代码: ```html <form> <input type="text" name="username" /> <input type="password" name="password" /> <input ...
接下来，代码中使用了`.length`属性来获取`<select>`中`<option>`元素的数量。这可以让我们遍历所有选项，执行某些操作。例如，在这个例子中，我们用`for`循环遍历从0到`count-1`的所有索引。 在循环内部，我们使用...
`<option>`元素是`<select>`的子元素，表示每个可选的值。 2. **表单验证**： 表单验证通常分为客户端验证和服务器端验证。客户端验证利用JavaScript或jQuery等技术，在用户提交表单前检查输入数据，可以提供即时...
<option value="" disabled>--请选择--</option> <option>男</option> <option>女</option> </select> <span>你的选择：{{select}}</span> ``` 当用户从下拉列表中选择一个选项时，`select` 的值会相应更新。 4...
<a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a> ``` ### 7. 解决select下拉框覆盖问题 使用`<iframe>`元素作为遮罩层，防止下拉菜单被其他元素遮挡： ```html <iframe src=...
<a href="javascript:function()">word</a> 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document.referrer 释放内存 CollectGarbage(); 禁止右键 document.oncontextmenu = ...