Home > Web Front-end > JS Tutorial > jQuery select control plug-in_jquery

jQuery select control plug-in_jquery

WBOY
Release: 2016-05-16 18:48:05
Original
928 people have browsed it

Share the code with everyone:
JavaScript code

Copy code The code is as follows:

/ /Get the number of select items
jQuery.fn.size = function()
{
return jQuery(this).get(0).options.length;
}
// Get the index of the selected item
jQuery.fn.getSelectedIndex = function()
{
return jQuery(this).get(0).selectedIndex;
}
//Get the currently selected item The text of
jQuery.fn.getSelectedText = function()
{
if(this.size() == 0)
{
return "No options in the drop-down box";
}
else
{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}
//Get the value of the currently selected item
jQuery.fn.getSelectedValue = function()
{
if(this.size() == 0)
{
return "There is no selected value in the drop-down box";
}
else
{
return jQuery(this).val();
}
}
//Setting select The item with value value is selected
jQuery.fn.setSelectedValue = function(value)
{
jQuery(this).get(0).value = value;
}
// Set the first item with text in select to be selected
jQuery.fn.setSelectedText = function(text)
{
var isExist = false;
var count = this.size();
for(var i=0;i{
if(jQuery(this).get(0).options[i].text == text)
{
jQuery(this).get(0).options[i].selected = true;
isExist = true;
break;
}
}
if(!isExist)
{
alert("This item does not exist in the drop-down box");
}
}
//Set the selected index item
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("The selected item index is out of range");
}
else
{
jQuery(this).get(0).selectedIndex = index;
}
}
//Judge whether there is a value in the select item. Item of value
jQuery.fn.isExistItem = function(value)
{
var isExist = false;
var count = this.size();
for(var i=0; i{
if(jQuery(this).get(0).options[i].value == value)
{
isExist = true;
break ;
}
}
return isExist;
}
//Add an item to the select, the display content is text and the value is value. If the item value already exists, it will prompt
jQuery.fn.addOption = function(text,value)
{
if(this.isExistItem(value))
{
alert("The value of the item to be added already exists");
}
else
{
jQuery(this).get(0).options.add(new Option(text,value));
}
}
/ /Delete the item with value in the select. If the item does not exist, prompt
jQuery.fn.removeItem = function(value)
{
if(this.isExistItem(value))
{
var count = this.size();
for(var i=0;i{
if(jQuery(this).get(0).options[ i].value == value)
{
jQuery(this).get(0).remove(i);
break;
}
}
}
else
{
alert("The item to be deleted does not exist!");
}
}
//Delete the item with the specified index in select
jQuery.fn.removeIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("Item to be deleted Index out of range");
}
else
{
jQuery(this).get(0).remove(index);
}
}
//Delete Selected items in select
jQuery.fn.removeSelected = function()
{
var index = this.getSelectedIndex();
this.removeIndex(index);
}
//Clear all items in the select
jQuery.fn.clearAll = function()
{
jQuery(this).get(0).options.length = 0;
}

When using it, first import the jquery.js file, then import the jquery.liu.select.js file, and then call the plug-in method. For example, if I want to clear all the items in the drop-down box with the ID selEmail, then I can do this: $("#selEmail").clearAll();
Note: The method in this plug-in is available in ie7 and firefox The verification has been passed. If there are any errors or areas that need improvement, I hope you will criticize and correct them.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template