jquery Learning notes: Manipulating one Form element (text box and drop-down box)

I. Overview

In Web page development, it is often necessary to get and set the values of form elements (such as the contents of a text box), especially in AJAX applications. This article describes how to operate the system.

As with other HTML elements, the process is similar.

In the first step, you need to get the jquery (or DOM) object that corresponds to the form element. This is mainly using the jquery selector mechanism.

The second step is to invoke the properties and methods of the form element to get and set the value.

One of the most common is the use of the jquery object's Val method. Because many form elements have a standard Value property, this can be read and set by the Val method of jquery.

Such as:

<textarea id= "Mytextarea" >ddd</textarea>

Alert ($ ("#mytextarea"). Val ()); Get content in the text area

$ ("#mytextarea"). Val ("good"); Set content

Different table units have their own different places, let's introduce one by one.

Two, text box and text field

With these two elements, the Val method of the JQuery object can be used to accomplish the related operation. Such as:

<input type= "text" id= "item" value= "Good" >

<textarea id= "Item" >some msg</textarea>

text box and text field content read and write the same way

Get content

var value = $ ("#item"). Val ()

Set content

$ ("#item"). Val ("Hello");

Three, drop-down boxes and list boxes

In an HTML form, the drop-down and list boxes are the corresponding select labels, which differ from the setting of the Size property.

One of the simplest select elements

<select id= "Item" >

<option value= "v1" > Value 1</option>

<option value= "v2" > Value 2</option>

<option value= "v3" > Value 3</option>

</select>

The above notation is a drop-down box, and we can set the Size property of the Select tag to make it a list box, such as: <select id= "Item" SIZE=3>

The drop-down box is equivalent to setting size = 1 or 0. Note that if it is a drop-down box, the first option is selected by default, and if the list box (size value is greater than 1), there is no default selected item.

The most common operation for a drop-down or list box is to get and set the currently selected option.

1. Static Settings selected

Adds a selected tag to the option element, the element is selected. Such as:

<select id= "Item" >

<option value= "v1" > Value 1</option>

<option value= "v2" selected> value 2</option>

<option value= "v3" > Value 3</option>

</select>

When the page opens, the default Value property of V2 option is selected. At this point the $ ("#item") is called. Val () returns the value of V2, which is the option that is selected by the Value property.

2, dynamic settings selected

Call the $ ("#item"). Val ("Value") method, and the option item with the value Val parameter is selected. If the option for the parameter value does not exist, then the drop-down box will not have any items selected, and $ ("#item") is called. Val () The value returned is null.

3, the operation of the selected item ordinal

In addition to calling $ ("#item"). Val () can get directly outside the value of the selected item. You can also take advantage of $ ("#item"). Prop ("SelectedIndex") Gets the SelectedIndex property value, which is the ordinal of the option when the list has the option selected (note starting from 0), if the list is not selected, The value of this property is-1.

You can also set the selected item by changing the value of the SelectedIndex, as

$ ("#item"). Prop ("SelectedIndex", 2) indicates that the 3rd element is selected.

4. Get the selected option object (Element)

Use the jquery selector, such as $ ("#item option:selected"), to get to the selected option object. Such as:

var obj = $ ("#item option:selected");

Alert (Obj.prop ("value")); Show option's Value property

Alert (Obj.prop ("text")); Display the Text property of option

5. Get the OPTION element

Because option is also an HTML tag, you can access it in the same way as a normal HTML tag.

Use the Options property to get to all option elements

such as: $ ("#item"). Prop ("Options") returns all option objects (note that the DOM object, not the jquery object)

$ ("#item"). Prop ("Options") [0].value//The Value property of the first option

$ ("#item"). Prop ("Options") [0].text//The text value of the first option, which is the textual content displayed

You can also operate directly from selectors, such as:

var obj = $ ("#item option"); Get all the OPTION elements

Obj.each (function (index,data) {

alert (Data.value);

});

6. Length Property

Use $ ("#item"). Prop ("Length") to get the number of SELECT element option

Of course there are other ways, such as:

$ ("#item"). Prop ("Options"). length

7.multiple Properties

When you set the multiple tag for a SELECT element, the elements in that list box can be multiple-selected.

<select id= "Item" Multiple size =3>

<option value= "v1" > Value 1</option>

<option value= "v2" > Value 2</option>

<option value= "v3" > Value 3</option>

</select>

It is important to note that if you set multiple selections, you need to set the Size property so that it behaves as a list box so that multiple selections can be made. When the Val method is called, if more than one item is selected, the value returned is separated by commas for multiple options. As selected above, the return value is V1,v2,v3.

Note that you cannot instead come through Val ("V1,v2") to set multiple options at the same time to be selected. This is required by setting the selected property to be selected. Such as:

var obj = $ ("#item option"); Get all the OPTION elements
Obj.each (function (index,data) {
$ (data). Prop ("selected", true);
});

The above code selects all option.

Iv. Summary

This article describes how to manipulate text boxes and drop-down boxes in form elements. Additional form elements are described in subsequent articles.

jquery Learning notes: Manipulating one Form element (text box and drop-down box)