javascript模拟select

1. js实现select选中option触发事件操作示例

本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考，具体如下：
我们在用到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本身没有触发事件方法，我们只有在select里的onchange方法里触发。
想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件
又在select中添加onclick 这下可好了,没选option呢就触发了
网络来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,用过就忘是不是猪脑子.
这次记住了吧应该
当我们触发select的双击事件时，用ondblclick方法。
当我们要取得select的选中事件时，用document.all['name'].value来获取，其中name是select的名称。
如果我们要得到select的全部的值就用一个for循环来实现。代码如下：
var vi = document.all['list'].length;for(var i=0;i<vi;i++){ document.form2.list(i).value; //form2是<form>的名称}
JS实现代码：
‍‍<select id="pid" onchange="gradeChange()"> <option grade="1" value="a">选项一</a> <option grade="2" value="b">选项二</a></select><script type="text/javaScript"> function gradeChange(){ var objS = document.getElementById("pid"); var grade = objS.options[objS.selectedIndex].grade; alert(grade); }</script>
jQuery实现代码：
<select name="myselect" id="myselect"> <option value="opt1">选项1</option> <option value="opt2">选项2</option> <option value="opt3">选项3</option></select>$("#myselect").change(function(){ var opt=$("#myselect").val(); .});
Javascript获取select下拉框选中的值
现在有一id=test的下拉框，怎么拿到选中的那个值呢？
分别使用javascript原生的方法和jquery方法
<select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option></select>
代码:
一、javascript原生的方法
1. 拿到select对象：
var myselect=document.getElementById("test");
2. 拿到选中项的索引：
var index=myselect.selectedIndex;// selectedIndex代表的是你所选中项的index
3. 拿到选中项options的value：
myselect.options[index].value;
4:拿到选中项options的text：
myselect.options[index].text;
二、jquery方法（前提是已经加载了jquery库）
1.获取选中的项
var options=$("#test option:selected");
2.拿到选中项的值
alert(options.val());
3.拿到选中项的文本alert(options.text());

2. 用JS来实现select选中值后使其他select为disabled

简单的写了一段代码,不限于个,可以是更多个select
<select id="a" onclick="javascript:doit(this);"><option value="请选择">请选择</option><option value="a">a</a></select>
<select id="b" onclick="javascript:doit(this);"><option value="请选择">请选择</option><option value="b">b</a></select>
<select id="c" onclick="javascript:doit(this);"><option value="请选择">请选择</option><option value="c">c</a></select>
<script type="text/javascript">
function doit(o){
var ss=document.getElementsByTagName("select");
if(o.options[o.selectedIndex].value=='请选择'){
for(var i=0;i<ss.length;i++){
ss[i].disabled=false;
}
}else{
for(var i=0;i<ss.length;i++){
if(ss[i]!=o) ss[i].disabled=true;
}
}
}
</script>

3. 怎么用js动态 设置select中的某个值为选中值

用JS动态设置select的方法如下：

手动通过原生JS来实现：

/**

* 设置select控件选中

* @param selectId select的id值

* @param checkValue 选中option的值

*/

function set_select_checked(selectId, checkValue){

var select = document.getElementById(selectId);

for (var i = 0; i < select.options.length; i++){

if (select.options[i].value == checkValue){

select.options[i].selected = true;

break; } } }

然后通过这样来调用：

// 设置select选中该班组

set_select_checked('edit-group', group_id);

注意：不要传'#edit-group'。

(3)javascript模拟select扩展阅读

js动态设置Select中Option选中

/** *设置select选中

*@paramselectIdselect的id值

*@paramcheckValue选中option的值

*@authorlqy */

functionsetSelectChecked(selectId,checkValue){

varselect=document.getElementById(selectId);

for(vari=0;i<select.options.length;i++){

if(select.options[i].innerHTML==checkValue){

select.options[i].selected=true;

break; } } };

4. 怎样用js取得select下拉列表框内选中的option的value值呢

单选下拉列表框对象的value属性值就是选中项的value值，因此只需用如下代码即可

var selected_val = document.getElementById(select_id).value;

并且，通过操作select下的option也可以得到被选项的value值，方法为：

var sel = document.getElementById(select_id);

var selected_val = sel.options[sel.selectedIndex].value;