js设置select列表中特定项为选中状态

最新推荐文章于 2022-11-25 15:57:35 发布
转载 最新推荐文章于 2022-11-25 15:57:35 发布 · 1.6k 阅读 · 1
文章标签：

#function

本文介绍了一个JavaScript函数，用于在HTML的下拉选择框(select)中根据指定的文本内容自动设置选项。通过遍历所有选项并匹配文本内容来实现。
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect,objItemText)
{
//判断是否存在
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].text == objItemText)
{
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if(isExit)
{
alert("成功选中");
}
else
{
alert("该select中 不存在该项");
}
}

http://www.corange.cn/archives/2008/10/2117.html

piperzero
关注
Js操作Select大全(取值、设置选中等等)
05-14
设置特定`value`的项为选中状态 使用`.val()`方法可以方便地设置选中状态。 ```javascript $(".selector").val("pxx"); ``` 这里的`pxx`是要选中的`option`的`value`属性值。 ##### 2. 设置特定`text`的项为选中...
Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）
10-30
函数jsSelectItemByValue用于设置具有特定text的option项为选中状态；函数jsGetCurrentSelectValue、jsGetCurrentSelectText和jsGetCurrentSelectIndex用于获取当前选中项的value、text和index值；函数jsClearSelect...
Js操作Select大全
何足道也
11-21 2763
jquery操作select(取值，设置选中） 每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。 比如 1、设置value为pxx的项选中 $(".selector").val("pxx"); 2、设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr("selecte
Js操作Select大全(取值、设置选中)
weixin_30393907的博客
12-28 1125
Js操作Select大全(取值、设置选中) Js操作Select是很常见的，也是比较实用的。 jquery操作select(取值，设置选中） 每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。 比如<select class="selector"></select>...
js引用<select>下拉列表选定的内容
x先生的博客
05-14 502
需求： 使用js获取select下拉列表里的内容，并显示在制定位置。 默认显示第一个option内容。 当下来列表选中的内容变化时，展示内容随之变化。 <select id="mySelect"> <option>上传网站案例</option> <option>上传插件案例</option> <option>上传博客</option> </select> 您目前选择的是<st
js动态设置单选输入框(radio)选中状态
I_recluse的博客
07-26 1万+
有时需要在js中动态控制单选输入框的选中状态，这一般有两种方法： 1.通过设置input单选输入框的元素属性“checked”为“checked”，但需要注意的是，要把上一次设置的“checked”属性去掉，不然再次点击同一个元素的时候，选中状态就会错误。 2.通过设置input单选输入框的DOM节点属性“checked”为true或false来实现。 下面通过一个例子来说明两种方法，这个例...
js 操作select相关方法函数
10-29
5. 根据显示文本设置select中第一个匹配的项为选中状态 函数jsselectitembyvalue接收两个参数，select元素objselect和要设置为选中的文本objitemtext。通过遍历select的选项集合，找到第一个与objitemtext相匹配的项...
jQuery操作select下拉框的text值和value值的方法
10-25
可以通过修改select元素的selectedIndex属性来设置特定索引的option项为选中状态。例如，若要设置索引为1的项为选中状态，代码如下： ```javascript $("#slc1").get(0).selectedIndex = 1; ``` 5. 设置特定value值...
js操纵dom生成下拉列表框的方法
12-09
`select.options[0].selected = true`将下拉列表的第一个选项设为默认选中状态。这里的`options`属性返回一个`HTMLOptionCollection`，代表`<select>`元素的所有`<option>`子元素。由于我们设置了长度为1，此时`...
设置selected选中的多种方法（总结）
qq3892997的博客
05-06 5384
jquery设置select下拉框切换几次之后不起作用 原本使用$("#selectId").find(“option[value=‘val’]”).attr(“selected”, true)设置option选中，发现只在第一次切换时有用，第二次切换就不起作用了。 后面发现浏览器有兼容性问题，这种设置方法不好使，需要只用jquery的prop()方法赋值。 $("#selector").fi...
有关在html中修改select标签的option selected默认选中属性实现
热门推荐
pinyinshang的博客
04-12 9万+
着急想要解决办法的朋友可以直接看最后的内容：}一般我们使用select标签时大概都会使用到option标签来填充下拉框中的内容只有几个固定的内容写死在页面还好，可能是这样的： &lt;select name="type"type="text"&gt; &lt;option velue= ""&gt;type&lt;/opt...
jQuery操作input值的各种方法总结
dianlupeng4187的博客
10-24 274
获取选中的值获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_i...
jQuery下拉多选插件ySelect.js
zhuzj12345的博客
05-06 3056
插件描述：简单实用的jQuery多选插件ySelect.js,支持反选，搜索，分组。 演示效果： 使用方法 引入常用引用 1 2 <linkhref="css/font-awesome.min.css"rel="stylesheet"type="text/css"> <linkhref="css/ySelect.c...
el-select实现全选功能
fsj0522的博客
11-25 2403
el-select实现多选功能，多选框选项过多时，能够实现点击“所有”选择全部数据
js 设置select选中的项
BlizzardWu的博客
08-17 5996
<select class="select_styled" id="ptz_com_nub"> <option style="font-size: 20px;" value="01" selected>COM1</option> <option style="font-size: 20px;" value="02">COM2 </option> <option style="font-size: 20px;"
如何通过js动态设置select中option选中
标哥
02-20 4万+
今天开发网站遇到一个小问题，如何动态通过js让select控件选中指定的值呢？在调试过程中，发现了amazeui这个ui组件的问题，使用它个组件的样式就无法通过selected=true设置为选中。 后来，去了官网查找了相关方法来实现，但是按照官网的代码并不能达到选中效果，最后无奈只能将样式去掉，使用HTML原有的样式，手动通过JS来实现这个功能。 解决办法 手动通过原生JS来实现：
AngularJS select组件如何默认选中状态
Heqianqian的博客
11-01 8386
每日问题总结打卡AngularJS是一个JavaScript框架，支持很多特性 AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素”背后”添加代码。 AngularJS 支持输入验证。 可以下载到本地引入或者使用CDN获取<script sr
jquery中select的change事件之后下拉框赋值事件失效原因
最新发布
12-28
### jQuery Select Change Event 后下拉框赋值失效原因分析 当遇到 `select` 元素的 `change` 事件触发后，尝试给该元素重新赋值却未生效的情况时，通常有几种可能的原因： #### 可能原因一：事件绑定顺序不当 如果在 DOM 尚未完全加载之前就绑定了 `change` 事件监听器，则可能导致后续操作无法正常执行。应确保所有的 JavaScript 或者 jQuery 的初始化代码都在文档准备完毕之后再运行。 ```javascript $(document).ready(function(){ $('#mySelect').on('change', function () { // 更改后的逻辑处理... }); }); ``` #### 可能原因二：选择器匹配不精确 确认用于选取目标 `select` 元素的选择器是否准确无误。错误的选择器可能会导致找不到对应的 HTML 元素从而使得任何对其的操作都无效[^1]。 #### 可能原因三：数据源问题 检查用来更新选项的数据是否存在格式上的问题或是为空。例如，在动态生成 `<option>` 标签的过程中可能出现拼写错误或者其他语法失误。 #### 解决方案建议 ##### 方法一：使用 `.prop()` 设置 selected 属性 对于单选或多选类型的 `select` 控件来说，可以利用 jQuery 提供的方法来改变其状态。比如通过设置某个特定项为默认选中项的方式实现赋值效果。 ```javascript $('#mySelect option[value="theValue"]').prop('selected', true); ``` 这种方法适用于静态页面结构下的简单场景；而对于更复杂的应用程序则推荐采用下面介绍的技术手段。 ##### 方法二：重置整个 select 内容并重建 options 列表 有时直接修改现有选项的状态并不能达到预期的效果，这时可以选择先清空原有的所有条目然后再逐一添加新的项目进去。 ```javascript var newOptions = [ {value:'opt1', text:'Option One'}, {value:'opt2', text:'Option Two'} ]; // 清除旧options $("#mySelect").empty(); $.each(newOptions, function(index, item){ $("#mySelect").append( $("<option>", { value : item.value, text : item.text }) ); }); // 如果需要立即选定某一项可继续调用如下语句 $("#mySelect").val("opt2"); ``` 上述方法能够有效解决大部分情况下由于缓存等原因造成的显示异常现象，并且兼容性较好[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值