Select 下拉框js动态修改

使用JS动态修改Select下拉框值

原创已于 2022-05-07 19:54:55 修改 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #开发语言

于 2022-05-07 15:53:01 首次发布

在工单报修系统中，遇到需求要依据文本内容动态改变select选择框的值。通过JavaScript和jQuery尝试实现，虽然可以改变选中值，但发现页面上并未动态添加'selected'属性到相应option。最终通过原生JavaScript解决，确保在各浏览器中正常工作，并通过调整默认选项解决预选问题。

一款工单报修系统，需要页面js根据文本的内容动态修改select选择框，然后提交，jsp代码：

<select id='ispeed' style='width:100% height:45px' name='ispeed' value="${ispeed}" class="font-center cs-select cs-skin-border" > 
  		<option  value='1' <c:if test="${'1' eq ispeed}" ></c:if>> 预约</option>     
  		<option  value='2' <c:if test="${'2' eq ispeed}" ></c:if>> 紧急</option> 
  		<option  value='3' <c:if test="${'3' eq ispeed}" selected="selected"></c:if>> 当天</option> 
  		</select>

js代码：

var t=document.getElementById('ispeed');
for (var i = 0; i < t.options.length; i++) {
								if (selectOld == t.options[i].text) {
									t.options[i].selected = true;
									break
								};
							};

js可以实现选择框的值选择，后台正确收到value，但页面后台查看option行并没有动态添加selected=‘selected’属性,不知道为什么？还是本来就这样？

jQuery代码：

            $('#ispeed').find('option:contains(' + text + ')').attr('selected', true);

jQuery这行代码实现了selected属性的动态选择，但当value=’3‘时，后台始终得不到值，尝试多种方法各种each历遍也不行。
很古老的问题了，其实原生js搞定了，各浏览器都可以，但又强迫症，用第二种方法，解决问题就是把jsp文件selected预选项删除，把默认选项上移第一项。哈哈