Jquery on the single box multi box text box and other common operation summary
- 2020-03-30 01:18:36
- OfStack
Text boxes, radio buttons, check boxes, related operations
var sex=$("input[name='sex']:checked").val(); //Gets the value of the selected item of a set of radio & NBSP;
var item=$("#sel option:selected").text(); //Gets the text & NBSP; of the selected item of the select;
var option_num=$('#sel').val(); //Gets the select item index
$("#sel")[0].selectedIndex =1; //The second element of the select drop-down box is the currently selected value
$("input[name='sex']").get(1).checked=true; //The second element of the radio radio group is the currently selected value
Or the default Settings for selecting a marquee:
$("input[name='sex']").each(function(){
if($(this).val()==s){
$(this).attr("checked",true);
//this.checked=true;
}
});
Jquery sets the drop-down list (select) default selection based on the value
<select name=sel onchange="bao(this.options[this.options.selectedIndex].value)">
<option value=""> Please select a
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
</select>
<script>
function bao(s)
{
txt.value=s;
//After selecting, let the first item be selected, so, there is Change.
document.all.sel.options[0].selected=true;
}
</script>
<textarea id=txt></textarea>
JQuery gets the Text and Value of the Select
Grammatical explanation:
$("#select_id").change(function(){//code...}); // for Select Add events when selecting one of the items Triggered when
var checkText=$("#select_id").find("option:selected").text(); //Gets the Text of the Select selection
var checkValue=$("#select_id").val(); //Gets the Value of the Select
var checkIndex=$("#select_id ").get(0).selectedIndex; //Gets the index value of the Select selection
var maxIndex=$("#select_id option:last").attr("index"); //Gets the largest index value of the Select
jQuery Set up the Select Select the Text and Value :
Grammatical explanation:
$("#select_id ").get(0).selectedIndex=1; //Set the selection of an item with a Select index value of 1
$("#select_id ").val(4); //Set the selection of an item with a Value of 4 in the Select
$("#select_id option[text='jQuery']").attr("selected", true); //Set the Text value of Select to be selected by jQuery
jQuery add / delete Select the Option Item:
Grammatical explanation:
$("#select_id").append("<option value='Value'>Text</option>"); //Append an Option to the Select
$("#select_id").prepend("<option value='0'> Please select a </option>"); //Insert an Option(first position) for the Select
$("#select_id option:last").remove(); //Delete the largest Option with the index value in the Select (the last one)
$("#select_id option[index='0']").remove(); //Delete Option with index value of 0 in Select (first)
$("#select_id option[value='3']").remove(); //Delete the Option with Value='3' in Select
$("#select_id option[text='4']").remove(); //Delete the Option that Text='4' in Select
Application:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery common</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Initialize the drop-down list -- add dynamically
var item = [' The kindergarten ',' Primary school ',' Junior high school ',' High school ',' The university of ',' A graduate student ',' Dr. ',' A master's degree '];
var html ="<option value='0'> Please select a </option>";
for (var i = 0;i < item.length;i++){
html += "<option value='"+(i+1)+"'>"+item[i]+"</option>";
}
$("#grade").empty().append(html);
$("#grade option[value='0']").attr("selected","selected");//The first item is selected by default
})
//Adds an event to the Select, which fires when one of the items is selected
function showIt(){
var selectText = $("#grade option:selected").text();//Gets the Text of the Select selection
//var selectText = $("#grade").find("option:selected").text();// This is also possible
var selectValue = $("#grade").val();//Gets the selected value
var selectIndex = $("#grade").get(0).selectedIndex//Gets the index value of the select
var text = ' Options: '+selectText+"n";
text +='value Value: '+selectValue+"n";
text +=' The index value: '+selectIndex;
$("#text").text(text);
}
</script>
</head>
<body>
<div>
<select name='grade' id='grade' onchange="showIt()"></select>
<p><textarea name='text' id='text' row='30' col='100'></textarea></p>
</div>
</body>
</html>