Javascript、jQuery 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

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的项

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为选中

document.all.objSelect.value = objItemValue;

// 8.得到select的当前选中项的value

var currSelectValue = document.all.objSelect.value;

// 9.得到select的当前选中项的text

var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.得到select的当前选中项的Index

var currSelectIndex = document.all.objSelect.selectedIndex;

// 11.清空select的项

document.all.objSelect.options.length = 0;

Jquery操作select

1.获取列表项中候选项的数目。

2.获得选中项的索引值。

3.获得当前选中项的值

4.设定选择值

5.设定选择项

...

//得到select项的个数

jQuery.fn.size = function(){

return jQuery(this).get(0).options.length;

}

//获得选中项的索引

jQuery.fn.getSelectedIndex = function(){

return jQuery(this).get(0).selectedIndex;

}

//获得当前选中项的文本

jQuery.fn.getSelectedText = function(){

if(this.size() == 0) return "下拉框中无选项";

else{

var index = this.getSelectedIndex();

return jQuery(this).get(0).options[index].text;

}

}

//获得当前选中项的值

jQuery.fn.getSelectedValue = function(){

if(this.size() == 0)

return "下拉框中无选中值";

else

return jQuery(this).val();

}

//设置select中值为value的项为选中

jQuery.fn.setSelectedValue = function(value){

jQuery(this).get(0).value = value;

}

//设置select中文本为text的第一项被选中

jQuery.fn.setSelectedText = function(text)

{

var isExist = false;

var count = this.size();

for(var i=0;i<count;i++)

{

if(jQuery(this).get(0).options[i].text == text)

{

jQuery(this).get(0).options[i].selected = true;

isExist = true;

break;

}

}

if(!isExist)

{

alert("下拉框中不存在该项");

}

}

//设置选中指定索引项

jQuery.fn.setSelectedIndex = function(index)

{

var count = this.size();

if(index >= count || index < 0)

{

alert("选中项索引超出范围");

}

else

{

jQuery(this).get(0).selectedIndex = index;

}

}

//判断select项中是否存在值为value的项

jQuery.fn.isExistItem = function(value)

{

var isExist = false;

var count = this.size();

for(var i=0;i<count;i++)

{

if(jQuery(this).get(0).options[i].value == value)

{

isExist = true;

break;

}

}

return isExist;

}

//向select中添加一项，显示内容为text，值为value,如果该项值已存在，则提示

jQuery.fn.addOption = function(text,value)

{

if(this.isExistItem(value))

{

alert("待添加项的值已存在");

}

else

{

jQuery(this).get(0).options.add(new Option(text,value));

}

}

//删除select中值为value的项，如果该项不存在，则提示

jQuery.fn.removeItem = function(value)

{

if(this.isExistItem(value))

{

var count = this.size();

for(var i=0;i<count;i++)

{

if(jQuery(this).get(0).options[i].value == value)

{

jQuery(this).get(0).remove(i);

break;

}

}

}

else

{

alert("待删除的项不存在!");

}

}

//删除select中指定索引的项

jQuery.fn.removeIndex = function(index)

{

var count = this.size();

if(index >= count || index < 0)

{

alert("待删除项索引超出范围");

}

else

{

jQuery(this).get(0).remove(index);

}

}

//删除select中选定的项

jQuery.fn.removeSelected = function()

{

var index = this.getSelectedIndex();

this.removeIndex(index);

}

//清除select中的所有项

jQuery.fn.clearAll = function()

{

jQuery(this).get(0).options.length = 0;

}