Home  >  Article  >  Web Front-end  >  Use Jquery's val() method_jquery

Use Jquery's val() method_jquery

WBOY
WBOYOriginal
2016-05-16 17:52:081234browse

Look at the following example:

Copy code The code is as follows:









Code:
Copy code The code is as follows:

$("#address").focus(function() { // The address box gets the mouse focus
var txt_value = $(this).val(); // Get the value of the current text box
if(txt_value==this.defaultValue){
$(this ).val(""); // If the conditions are met, clear the text box content
}
});

Note: this.defaultValue is the default value of the current text box .
The val() method has another use, that is, it can enable the corresponding items of select (drop-down list box), checkbox (multi-select box) and radio (radio button) to be selected, which is often used in form operations. Will be used. Look at the following example:
Copy the code The code is as follows:




< ;input type="button" value="Set radio button and multi-select box selection"/>









Multiple choice 1
Multiple choice 2
Multiple choice 3
Multiple choice 4


Single choice 1
Single choice 2
Single choice 3


After running, the default display effect is as follows:
Use Jquery's val() method_jquery
What should I do if I want to change the selected item at this time? Add the following code in the javascript area:
Copy the code The code is as follows:

$(function() {
//Set the radio drop-down box to select
$("input:eq(0)").click(function(){
//$("#single").val("Select No. 5");
$("#single").val("5"); // and $("#single").val("Select No. 5"); can achieve the effect
var options=$('#single option:selected')
alert(options.val());
});
//Set the multi-select drop-down box to select
$( "input:eq(1)").click(function(){
// $("#multiple").val(["Select No. 2", "Select No. 3"]);
$ ("#multiple").val(["3", "4"]); //Assign value in the form of array
});
//Set radio button and multi-select box selection
$("input:eq(2)").click(function(){
$(":checkbox").val(["check2","check3"]); //Assign value in the form of array
$(":radio").val(["radio2"]);
});
});

Then click the following three buttons:

Use Jquery's val() method_jquery

You will find that the default selected item has changed to the item you want to set. As shown below:

Use Jquery's val() method_jquery

The above is a wonderful use of jquery's val() method. I hope it will be helpful when you operate multi-select and check boxes.
Statement:
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