Home > Developer > JavaScript
Let's take a look at the following example:
Copy codeThe Code is as follows:
<Input type = "text" id = "address" value = "enter email address"/> <br/>
<Input type = "text" id = "password" value = "Enter your email password"/> <br/>
<Input type = "button" value = "login"/>
Code:
Copy codeThe Code is as follows:
$ ("# Address"). focus (function () {// address box to get the mouse focus
Var txt_value = $ (this). val (); // obtain the value of the current text box.
If (txt_value = this. defaultValue ){
$ (This). val (""); // if the conditions are met, the text box content is cleared.
}
});
Note: this. defaultValue is the default value of the current text box.
The val () method is also useful in enabling the select (drop-down list box), checkbox (multiple-choice box), and radio (single-choice) items to be selected, this is often used in form operations. Let's take a look at the following example:
Copy codeThe Code is as follows:
<Body>
<Input type = "button" value = "select a single-choice drop-down box"/>
<Input type = "button" value = "select multiple from the drop-down list"/>
<Input type = "button" value = "set single-choice and multi-choice box selection"/>
<Br/>
<Select id = "single">
<Option value = "1"> 1 </option>
<Option value = "2"> select No. 2 </option>
<Option value = "3"> 3 </option>
<Option value = "4"> select No. 4 </option>
<Option value = "5"> select number 5 </option>
</Select>
<Select id = "multiple" multiple = "multiple" style = "height: 120px;">
<Option value = "1" selected = "selected"> select No. 1 </option>
<Option value = "2"> select No. 2 </option>
<Option value = "3"> 3 </option>
<Option value = "4"> select No. 4 </option>
<Option value = "5" selected = "selected"> select number 5 </option>
</Select>
<Br/>
<Input type = "checkbox" value = "check1"/> select one more
<Input type = "checkbox" value = "check2"/> select 2
<Input type = "checkbox" value = "check3"/> select 3
<Input type = "checkbox" value = "check4"/> select 4
<Br/>
<Input type = "radio" value = "radio1"/> single choice 1
<Input type = "radio" value = "radio2"/> single choice 2
<Input type = "radio" value = "radio3"/> single choice 3
</Body>
After running, the default display effect is as follows:
What should I do if I want to change the selected item at this time? Add the following code in the javascript area:
Copy codeThe Code is as follows:
$ (Function (){
// Select a single-choice drop-down box
$ ("Input: eq (0)"). click (function (){
// $ ("# Single"). val ("select 5 ");
$ ("# Single "). val ("5"); // and $ ("# single "). val ("select No. 5"); this method can achieve the effect.
Var options = $ ('# single option: selected ')
Alert (options. val ());
});
// Select multiple from the drop-down list
$ ("Input: eq (1)"). click (function (){
// $ ("# Multiple"). val (["select 2", "select 3"]);
$ ("# Multiple"). val (["3", "4"]); // assign values as Arrays
});
// Set single-choice and multi-choice boxes to select
$ ("Input: eq (2)"). click (function (){
$ (": Checkbox"). val (["check2", "check3"]); // assign values as Arrays
$ (": Radio"). val (["radio2"]);
});
});
Then, click the following three buttons:
You will find that the selected items by default have changed to the items you want to set. As follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
