js 怎么动态设置 option 的selected 选项
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 怎么动态设置 option 的selected 选项相关的知识,希望对你有一定的参考价值。
<input type="hidden" name="a" value="$a"/>
<select class="null" id="functioncode" name="null">
<option selected value="">- Please select one -</option>
<option title="BC" value="100000001005">BC</option>
<option title="CSP" value="100000001003">CSP</option>
<option title="GPC" value="100000001007">GPC</option>
<option title="Ops" value="100000001004">Ops</option>
<option title="gps" value="100000001008">gps</option>
</select>
跟据 name =“a” 元素的value 动态设置 option的selected ,比如 a=100000001003,则CSP 被selected
通过for循环判断每个选项,一旦满足条件则设置其selected属性为true即可,关键代码:
下面给出实例演示:
1、html结构
2、javascript代码
3、设置效果:如图设置选中项为2,点击按钮后“赵云”即被选中。
扩展资料:
selected 定义和用法
selected 属性规定在页面加载时预先选定该选项。
被预选的选项会显示在下拉列表最前面的位置。
也可以在页面加载后通过 JavaScript 设置 selected 属性。
参考资料:百度百科JS
参考技术A程序如下:
//动态展示元素
var showDynamic=function()
var inputValue=document.getElementsByName("a")[0];
//注意,此处必须写一个合适的触发事件,onclick or onfocus,也可以被调用触发。
//但是,必须有触发事件。
inputValue.onclick=function()
if(this.value!="")
showResult(this.value);
;
;
//展示函数
var showResult=function(v)
var showLabel=document.getElementById("functioncode");
for(var i=0;i<showLabel.length;i++)
if(showLabel[i].value==v)
showLabel[i].selected="selected";
;
//注册到window加载中
window.onload=showDynamic;
//如果使用jQuery,则更加简单。以下是jQuery的写法,使用哪一种,你自己根据情况而定。
$(document).ready(function()
var inputValue=$("input[name='a']");
inputValue.click(function()//或者focus事件
var that=$(this).val();
$("#functioncode").each(function()
if($(this).val()==that)
$(this).attr("selected",true);
);
);
);
扩展资料:
思路:通过for循环判断每个选项,一旦满足条件则设置其selected属性为true即可,关键代码:
obj = document.getElementById(select_id);
for(i=0;i<obj.length;i++)
if(obj[i].value == something)
obj[i].selected = true;
下面给出实例演示:
1、HTML结构
<select id="test">
<option selected value="0">- 请选择 -</option>
<option value="1">关羽</option>
<option value="2">赵云</option>
<option value="3">马超</option>
<option value="4">黄忠</option>
<option value="5">张飞</option>
</select>
<input type="text" id="sel_text"/><input
参考技术B思路:通过for循环判断每个选项,一旦满足条件则设置其selected属性为true即可,关键代码:
obj = document.getElementById(select_id);for(i=0;i<obj.length;i++)
if(obj[i].value == something)
obj[i].selected = true;
下面给出实例演示:
1、HTML结构
<select id="test"><option selected value="0">- 请选择 -</option>
<option value="1">关羽</option>
<option value="2">赵云</option>
<option value="3">马超</option>
<option value="4">黄忠</option>
<option value="5">张飞</option>
</select>
<input type="text" id="sel_text"/><input type='button' value='设置选项' onclick="fun()"/>
2、javascript代码
function fun()str = document.getElementById("sel_text").value;
obj = document.getElementById("test");
for(i=0;i<obj.length;i++)
if(obj[i].value==str)
obj[i].selected = true;
3、设置效果:如图设置选中项为2,点击按钮后“赵云”即被选中
参考技术C //动态展示元素var showDynamic=function()
var inputValue=document.getElementsByName("a")[0];
//注意,此处必须写一个合适的触发事件,onclick or onfocus,也可以被调用触发。
//但是,必须有触发事件。
inputValue.onclick=function()
if(this.value!="")
showResult(this.value);
;
;
//展示函数
var showResult=function(v)
var showLabel=document.getElementById("functioncode");
for(var i=0;i<showLabel.length;i++)
if(showLabel[i].value==v)
showLabel[i].selected="selected";
;
//注册到window加载中
window.onload=showDynamic;
//如果使用jQuery,则更加简单。以下是jQuery的写法,使用哪一种,你自己根据情况而定。
$(document).ready(function()
var inputValue=$("input[name='a']");
inputValue.click(function()//或者focus事件
var that=$(this).val();
$("#functioncode").each(function()
if($(this).val()==that)
$(this).attr("selected",true);
);
);
);本回答被提问者采纳 参考技术D // 获取 input name="a"
// 因为你给出的代码没有 id,没有 class,这里假设页面只有一个 name=a 的 元素
var a = document.getElementsByName("a")[0];
// 获取 ID 为 functioncode 的 select 下面所有的 option
var options = document.getElementById("functioncode").options;
// 循环
for(var i = 0; i < options.length; i++)
// 如果此 option 的 value 等于 a 的 value
if(options[i].value == a.value)
// 设置此 option 的 selected 属性
options[i].selected = true;
以上是关于js 怎么动态设置 option 的selected 选项的主要内容,如果未能解决你的问题,请参考以下文章