JS动态改变select选择变更option的index值(js操作select)

转自：http://ilovecsr.blog.163.com/blog/static/172496617201192952241915/

document.getElementById("louyuming").options[0].selected=true;

Javascript 操作select是表单中常见的一种，今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再删除索引小的，否则删除了索引小的后索引大的索引就变化了，再删除时就会出现问题－－问题的关键是for循环是要从大到小，而不是常规的从0到 length）

// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
     var length = objSelect.options.length - 1;
     for(var i = length; i >= 0; i--){
         if(objSelect[i].selected == true){
             objSelect.options[i] = null;
         }
     }
}

1判断select选项中是否存在Value="paraValue"的Item
2向select选项中加入一个Item
3从select选项中删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项

======================================================================

动态删除select中的所有options：
function deleteAllOptions(sel){
sel.options.length=0;
}
动态删除select中的某一项option：
function deleteOption(sel,indx){
sel.options.remove(indx);
}
动态添加select中的项option:
function addOption(sel,text,value){
sel.options.add(new Option(text,value));
}
上面在IE和FireFox都能测试成功，希望以后可以用上。

===========================================

js 代码
// 1.判断select选项中是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
     var isExit = false;
     for (var i = 0; i < objSelect.options.length; i++) {
         if (objSelect.options[i].value == objItemValue) {
             isExit = true;
             break;
         }
     }
     return isExit;
}

// 2.向select选项中加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
     //判断是否存在
     if (jsSelectIsExitItem(objSelect, objItemValue)) {
         alert("该Item的Value值已经存在");
     } else {
         var varItem = new Option(objItemText, objItemValue);
         objSelect.options.add(varItem);
         alert("成功加入");
     }
}

// 3.从select选项中删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
     //判断是否存在
     if (jsSelectIsExitItem(objSelect, objItemValue)) {
         for (var i = 0; i < objSelect.options.length; i++) {
             if (objSelect.options[i].value == objItemValue) {
                 objSelect.options.remove(i);
                 break;
             }
         }
         alert("成功删除");
     } else {
         alert("该select中不存在该项");
     }
}


// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
     var length = objSelect.options.length - 1;
     for(var i = length; i >= 0; i--){
         if(objSelect[i].selected == true){
             objSelect.options[i] = null;
         }
     }
}

// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
     //判断是否存在
     if (jsSelectIsExitItem(objSelect, objItemValue)) {
         for (var i = 0; i < objSelect.options.length; i++) {
             if (objSelect.options[i].value == objItemValue) {
                 objSelect.options[i].text = objItemText;
                 break;
             }
         }
         alert("成功修改");
     } else {
         alert("该select中不存在该项");
     }
}

// 6.设置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中不存在该项");
     }
}

// 7.设置select中value="paraValue"的Item为选中
objSelect.value = objItemValue;

// 8.得到select的当前选中项的value
var currSelectValue = objSelect.value;

// 9.得到select的当前选中项的text
var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.得到select的当前选中项的Index
var currSelectIndex = objSelect.selectedIndex;

// 11.清空select的项
objSelect.options.length = 0;

整个实例的完整代码如下：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">

</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" οnchange="watch_sel(this.form)"></select><br>
<script language="javascript">

</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" οnclick="watch_add(this.form);" />
<input type="button" value="修改" οnclick="watch_mod(this.form);" />
<input type="button" value="删除" οnclick="watch_del(this.form);" />
<input type="button" value="保存" οnclick="watch_set(this.form);" />
</form>
</body>
</html>

原文地址：http://blog.csdn.net/jaylongli/article/details/4006904

JS操作SELECT表单大全，赋默认值，取值，增，删等 .

var selectId=document.getElemengById('selectId');

清空select的项

selectId.options.length = 0;

如果留下第一行的话就是

selectId.options.length = 1;

向select选项中加入一个Option

var varOption = new Option(objOptionText,objOptionValue);

selectId.options[selectId.options.length] = varOption;

//或selectId.options.add(varOption);

从select选项中删除一个Option

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

{

if(selectId.options[i].value == objOptionValue)

{

selectId.options.remove(i);

break;

}

设置select中text=”paraText”的第一个Option为选中

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

{

if(selectId.options[i].text == objOptionText)

{

selectId.options[i].selected = true;

isExit = true;

break;

}

设置select中value=”paraValue”的Option为选中

selectId.value = objOptionValue;

得到select的当前选中项的value

var currSelectValue = selectId.value;

得到select的当前选中项的text

var currSelectText = selectId.options[selectId.selectedIndex].text;

得到select的当前选中项的Index

var currSelectIndex = selectId.selectedIndex;

原文地址：http://blog.csdn.net/foart/article/details/6792118

转自：http://www.cnblogs.com/xyzhuzhou/archive/2012/01/05/2313221.html

jQuery 1.3.2版本下的 jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关

设置

获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text();

获取select被选中项的文本 :var item = $("select[name=items] option[selected]").text(); 或$("select[name=items]").find("option:selected").text();

select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1;

select下拉框value = 'val'的元素为当前选中项:$("select[name=items] option[value='val']").attr("selected","selected");

radio单选组的第二个元素为当前选中项 :$('input[@name=items]').get(1).checked = true; 或$('input[name=items]').attr("checked", '1′);

radio的value = 'val'的元素为当前选中项:$('input[name=items] [value='val']').attr("checked","checked");

获取值:

文本框,文本区域:$("#txt").attr("value");

多选框checkbox:$("input[name='checkbox':checked]").each(function(){

var val = $(this).val();

});

单选组radio: $("input[type=radio][checked]").val();

下拉框select的value值: $('select').val();

下拉框select选中的text 值:$("select").find("option:selected").text();

控制表单元素:

文本框,文本区域:$("#txt").attr("value","); //清空内容

$("#txt").attr("value",'11′); //填充内容

多选框checkbox: checkbox的第二个元素被打勾:$("input[name=items]").get(1).checked = true; //打勾 $("input[name=items]").get(1).checked = false; //不打勾

checkbox的value='val'的元素前打勾:$("input[name=item][value='val']").attr("checked",true); 或$("input[name=item][value='val']").attr("checked","checked");

if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾

单选组radio: $("input[type=radio]").attr("checked",'2′);//设置value=2的项目为当前选中项

下拉框select: $("#sel").attr("value",'-sel3′);//设置value=-sel3的项目为当前选中项

$("<option value='1′>1111</option><option value='2′>2222</option>").appendTo("#sel")//添加下拉框的option

$("#sel").empty();//清空下拉框

jQuery获取Radio选择的Value值代码

$("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值 $("#text_id").focus(function(){//code...}); //事件当对象text_id获取焦点时触发 $("#text_id").blur(function(){//code...}); //事件当对象text_id失去焦点时触发 $("#text_id").select(); //使文本框的Vlaue值成选中状态 $("input[name='radio_name'][value='要选中Radio的Value值'"). attr("checked",true); //根据Value值设置Radio为选中状态

jQuery获取CheckBox选择的Value值

$("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合如果你想得到 Value值你需要遍历这个集合 $($("input[name='checkbox_name'][checked]")). each(function(){arrChk+=this.value + ',';});//遍历被选中CheckBox元素的集合得到Value值 $("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false) $("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true) $("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false) $("input[name='checkbox_name']").attr ("checked",$("#checkbox_id").attr("checked"));//根据3,4,5条,你可以分析分析这句代码的意思 $("#text_id").val().split(","); //将Text的Value值以','分隔返回一个数组

转自：http://blog.csdn.net/dogfish/article/details/4138343

Jquery提供了获得和设置元素的value的方法。如input， textarea等元素的value值。

例子：

1. val（）获取元素的值。jquery不能直接使用value属性去操作元素的值。

错误操作： var myvalue=$("#a").value;

正确操作： var myvalue=$("#a").val();

2. val("要设置的值") ：设置元素的值。

错误操作： $("#a").value="new value";

正确操作： $("#a").val("new value");

那个错误例子是我第一次使用的时候，想当然的使用方法。当然，那是不对的。