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>


Related articles: