假设有:
<select name="sname">
<option value="1">class 1</option>
<option value="2" selected>class 2</option>
</select>
执行:
var opt = document.createElement("option");
opt.value="3";
opt.innerHTML="class 3";
document.getElementById("sname").appendChild(opt);
document.getElementById("sname").selectedIndex=2;
//这样并不能选中第三项,只有新加的项会出现这种情况
解决:
在document.sname.selectedIndex=2;之前调用一下document.getElementById("sname").focus();
或者setTimeout(0, new Function("document.getElementById('sname').selectedIndex=2;"));
分享到:
相关推荐
本文档将详细介绍如何利用原生JavaScript和jQuery来操作`<select>`元素,包括但不限于取值、设置选中状态等常见操作。 #### 二、基础知识回顾 在开始深入讲解之前,我们先回顾一下`<select>`的基本结构: ```html ...
在select元素中,我们使用option元素来定义下拉列表的每一项,并为其中的一项设置selected属性,使其成为初始选中的项。比如,在这段代码中,value="2"的option被默认选中。 ```html <select name="select" id=...
Struts2提供了一个非常强大的标签——`<s:select>`,它可以用来生成一个`<select>`下拉列表,并支持动态设置默认选中项。 #### 代码示例 假设我们需要根据用户提交的`auditingLog`对象中的`auditingState`属性值来...
总之,通过JavaScript操作DOM,我们可以方便地在网页上动态设置`<select>`元素的默认选中项。这个功能在许多交互式应用场景中非常有用,比如用户配置、数据筛选等。在实际项目中,还可以结合事件监听器,如`change`...
标题中的"ExtJs 实现select列表选中项时添加删除"指的是在ExtJS应用中创建一个下拉选择列表(Select List),并且当用户选择某一项时,能够执行添加或删除操作。这通常涉及到事件监听、数据模型的操作以及用户界面的...
当任一select的选中值改变时,它会将当前选中值传递到另一个select,并清除自身的选中状态。这样,用户在任一侧选择一个值后,该值会立即被交换到另一侧,同时自身清空。 在实际应用中,你可能需要根据业务需求进行...
在使用element-ui开发Web项目时,经常会遇到一些组件使用上的细节问题,其中element-ui中的下拉多选框组件el-select使用时,如何设置默认值且不可删除,是一个较为常见的需求。本文将详细介绍如何解决这个问题,以及...
对原来的select的操作完全没有改变,取值依然是取select的值,设置选中,添加项删除项等等都没有改变。用脚本动态设置select的值时请在后面加上一个change()这样显示的值才会改变。不知道怎么监控脚本对select的值的...
- 设置选中值:假设要选中`value="option2"`的项,可以这样操作:`document.getElementById('mySelect').selectedIndex = 1;`(数组索引从0开始)。 3. **添加和删除选项**: - 添加选项:使用`<select>`元素的`...
在Web开发中,模拟select元素的点击事件是一项常见的需求,尤其是当我们希望在不直接与页面交互的情况下改变选项值时。本文将通过实例讲解来阐述如何在使用layui框架的情况下,模拟select的点击事件。 ### 标题知识...
1. **设置value为pxx的项选中** 当你需要将某个选项设为选中状态,且该选项的`value`属性为`pxx`时,可以使用`val()`方法。例如: ```javascript $('.selector').val('pxx'); ``` 这行代码会查找所有class为`...
下面将详细介绍如何通过`option的value`比较来确定`select`的默认选中项,并结合HTML和JavaScript的相关知识进行深入探讨。 1. HTML基础 在HTML中,`<select>`元素创建一个下拉列表,通过`<option>`标签添加选项。...
在Vue.js中,`<select>`元素的使用和设置默认选中是一个常见的需求,尤其是在处理表单和数据绑定时。...遵循这些步骤,你就能确保在Vue中正确地使用`<select>`并设置默认选中项,避免遇到页面加载后下拉框为空的情况。
可以使用 `$("#select_id option[text='jQuery']").attr("selected", true)` 方法设置 Select 的 Text 值为 jQuery 的项选中。 三、 jQuery 添加/删除 Select 的 Option 项 jQuery 也提供了方法来添加或删除 ...
标题“LayUI下拉多选添加选中事件”暗示我们要讨论的是如何在LayUI的下拉多选框中实现选中项的事件处理。在LayUI中,下拉多选通常使用`layui-select`样式和`layui-form-checkbox`类来创建,同时配合JavaScript进行...
《jQuery模拟Select下拉菜单选中添加代码》 在网页开发中,Select下拉菜单是一种常见的用户交互元素,用于提供多个选项供用户选择。然而,原生的HTML Select标签有时不能满足设计师和开发者对于界面美观性和交互性...
同时,它还提供了一些操作方法,如`setSelected`用于设置选中项,`reset`用于重置选择状态,`getSelected`用于获取当前选中的选项等。 4. **事件监听**:可以监听`xm-select`的各种事件,如`change`事件,当用户...
首先,我们来看一下如何用JavaScript动态地向`select`元素添加选项。这通常涉及以下几个步骤: 1. 获取`select`元素:通过`document.getElementById`或`document.querySelector`等方法获取`select`元素的引用。 ```...
当`select`的值发生变化时,会遍历所有`select`并取消其他`select`的选中状态,从而实现了互斥选择。 如果你有多个`select`元素,只需将它们的ID添加到`querySelectorAll`的参数列表中即可。同时,需要注意的是,这...
然而,当`<select>`列表中的选项内容过长时,可能会出现一些问题,比如显示不全或者遮挡其他内容。针对这个问题,我们可以采取以下策略来优化和解决: 1. **设置固定宽度**:你可以为`<select>`元素设置一个固定的...