<html>
<head>
<title>js select 例子</title>
<script language="javascript" type="text/javascript">
function isSelected(ah) { //判断选择的值已经存在
if (ah.value != "" && ah.value != null) {
var ss = document.getElementsByTagName("select"),temp = [];
for (var i=0;i<ss.length;i++) {
if (ah.value == ss[i].value) {
temp.push(ss[i].value);
}
}
if (temp.length > 1) {
alert("请选择其他小白同志!!!");
ah.value = "";
}
}
}
function showCsmc() { //取得select标签的文本内容
var cs = document.getElementById("cs");
if (cs.value !="" && cs.value != null) {
alert("编号：" + cs.value + " 名称："
+ cs.options[cs.selectedIndex].innerHTML);
}
}
</script>
<body>
<select id="ah" onchange="isSelected(this);">
<option value="">--请选择_1--</option>
<option value="1">小白1</option>
<option value="2">小白2</option>
<option value="3">小白3</option>
</select>
<select id="ah" onchange="isSelected(this);">
<option value="">--请选择_2--</option>
<option value="1">小白1</option>
<option value="2">小白2</option>
<option value="3">小白3</option>
</select>
<select id="ah" onchange="isSelected(this);">
<option value="">--请选择_3--</option>
<option value="1">小白1</option>
<option value="2">小白2</option>
<option value="3">小白3</option>
</select>
<select id="cs" onchange="showCsmc();">
<option value="">--请选择 你喜欢的城市--</option>
<option value="sh">上海</option>
<option value="hz">杭州</option>
<option value="bj">北京</option>
</select>
</body>
</html>
分享到：
相关推荐
总结，`select`元素在JavaScript中是不可或缺的一部分，尤其在表单提交和用户交互场景中。通过熟练掌握它的用法和相关事件处理，可以构建更丰富、更具有交互性的网页应用。希望这个详解能帮助你理解和运用`select`...
在JavaScript（JS）编程中，动态添加Select中的Option元素值是一项常见的需求，特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能，并提供一个实际的案例来演示这一过程。 首先，我们要理解HTML...
要实现上述功能，我们需要在页面上引入select2.js的JavaScript和CSS文件，并对Select元素进行初始化。以下是一个基本示例： ```html <!DOCTYPE html> <link href="https://cdn.jsdelivr.net/npm/select2@4.x/...
<script src="node_modules/select2/dist/js/select2.min.js"> ``` 三、创建基础的Select2实例 在HTML中创建一个基础的Select元素： ```html <select id="mySelect"> <!-- 这里添加你的选项 --> </select> ``` ...
一个小例子，含全选，有注释，学习一下这些表单元素的属性和方法
在这个例子中，我们使用的版本是`jquery-1.8.3.min.js`。确保在`<head>`标签内或者`<body>`标签的最上方引入此文件，如下所示： ```html <script src="jquery-1.8.3.min.js"> ``` **1. 选中和更改选中项** 要选中...
然而，标准的 `<select>` 标签默认只支持单选，但通过 JavaScript（JS） 和 jQuery（JQ） 的帮助，我们可以实现多选功能，即复选。这里将详细讲解如何实现 `JS select 标签复选`。 首先，我们需要一个基本的 HTML ...
在JavaScript（简称js）的帮助下，我们可以实现这些功能。本文将深入探讨如何利用JavaScript来增强`<select>`标签的搜索功能。 首先，我们需要了解基础的`<select>`结构。一个简单的`<select>`标签如下所示： ```...
今天我们将深入探讨一个名为“mobileSelect.js”的JavaScript库，它专为移动端H5设计，旨在实现快速、简洁的底部弹窗选择功能。 “mobileSelect.js”是一个轻量级的JavaScript插件，主要针对移动设备的H5页面设计。...
简单的例子，点击按钮就删除掉option，也可以通过jquery加载的时候进行删除。
在这个例子中，`#mySelect`是下拉框的ID，`select2.min.js`和`select2.min.css`分别是Select2的JavaScript和CSS文件。 总结来说，"下拉框带模糊查询引入select2组件.zip"是一个包含Select2库和使用示例的压缩包，...
在HTML和JavaScript编程中，`<select>`元素用于创建下拉列表，经常需要进行动态操作，比如添加、删除、修改选项，以及选中和清空选中的值。本篇文章将探讨如何通过JavaScript来实现这些功能，并判断控件是否存在。...
对于调整Option在Select中的顺序，`fnUp()`函数提供了一个例子，允许用户将选中的Option与其上方的Option交换位置。这通过遍历Select的选项，检查每个选中的Option，然后交换它们的位置来完成。 除了上述基本操作...
在上面的例子中，`hselect(myElement, ':before')` 创建了一个针对`#myElement`元素`:before`伪元素的对象，随后可以通过`.style`属性来设置或修改CSS样式。 值得注意的是，`hselect`工具可能不支持所有CSS属性，...
在这个例子中，我们用到了`jquery-1.8.2.min.js`和`jquery.select.widget-1.0.js`两个jQuery插件。 `jquery.select.widget-1.0.js`是专门用来实现自定义下拉选择框功能的插件，它会监听`<select>`元素，并将其转换...
以下是一个完整的使用`ySelect.js`的例子： ```html <!DOCTYPE html> <title>ySelect演示 <script src="https://code.jquery.com/jquery-3.6.0.min.js"> <script src="path/to/ySelect.js"> /* ...
Vue.js是一个轻量级的前端JavaScript框架，以数据驱动和组件化著称，非常适合构建单页面应用（SPA）。它允许开发者通过组件化的方式构建页面，每一个Vue组件都有自己的模板、逻辑和样式。Vue.js的特点包括： 1. **...
2. **jQuery代码**：`src`目录下的JavaScript文件（可能是`select.js`）包含了模拟Select的插件实现和qTip的配置。 3. **CSS样式**：为了使模拟的Select和提示看起来更自然，可能还需要自定义CSS样式，这可能在HTML...
在这个例子中，`{{each}}`是一个循环控制结构，`items`是数据对象的一个属性，`${name}`是数据对象中`name`属性的值。当模板与数据结合时，它会遍历`items`数组，为每个元素生成一个`<li>`标签。 接下来，我们需要...
本示例中，"JQ JS javascript layui UI框架 带搜索下拉框 select" 是一个基于jQuery和layui的特定功能实现，即在layui的UI设计中创建了一个具有搜索功能的下拉选择框。这个功能在许多网页应用中都很常见，例如在表单...