select

Attribute list

Attribute name	Attribute value	describe
autofocus	autofocus	After the page is loaded, the text area automatically gets the focus
disabled	disabled	Disable the drop-down list
form	form_id	Specify one or more forms to which the text area belongs [see example 2 below]
multiple	multiple	Indicates that multiple options can be selected from the drop-down list < Ctrl + left click selection, and the check box is more recommended >
name	name	Specifies the name of the drop-down list
required		< this attribute is not supported by all major browsers >
size	number	The number of options visible in the drop-down box is 1 by default

give an example:

<!-- The visible option in the drop-down box is 2 -->
<select autofocus size=2 miltiple>
    <option>Basketball</option>
    <option>Football</option>
    <option>Billiards</option>
    <option>Tennis</option>
</select>



<!-- Disabled -->
<select disabled>
    <option>11</option>
    <option>2</option>
</select>

The effect is shown in the figure:

option

Use with the select tag, otherwise it is meaningless

Attribute list

attribute	value	describe
disabled		Specifies that this option should be disabled on first load
label		Used in combination with the optgroup tab, when there are many options in the drop-down box, it can be classified once
selected		Indicates which option is selected by default. If multiple option tags have this attribute, the following one takes precedence
value		Defines the value to send to the request

Value attribute: for example, in a form, an item is selected through the drop-down list. Here, select < option value ='1 '> three < option / >. The data corresponding to the select tag sent to the server of the form form is 1, not three

Example 1:

<select autofocus>
    <optgroup label="ball game">
        <option disabled>Basketball</option>
        <option disabled>Football</option>
        <option>Billiards</option>
        <option >Tennis</option>
        <option selected>Softball</option>
        <!-- Multiple option have selected，Choose the back -->
        <option selected>Table Tennis</option>
    </optgroup>
    <optgroup label="Athletics">
        <option>100 rice</option>
        <option>high jump</option>
        <option>Shot-put</option>
    </optgroup>
</select>

The effect in the browser is as follows:

value attribute

Defines the option values sent to the server. If the declared value is not displayed, it defaults to the text content

For example, if Kobe is selected at this time, get the val() of the select tag with id "demo" to get "Kobe", but if james is selected, get the val() of the select tag with id "demo" to get "james"

<select id="demo">
    <option>Kobe</option>
    <option value="james">James</option>
</select>

Example 2:

<form id="form_id">
    <input type="button" id="test_btn" value="Test it"/>
</form>
<!-- Here, you can define a drop-down box outside the form, as long as the value of the drop-down box form attribute=corresponding form Tabular id[Multiple can be selected form] This data will still be consistent with form The form is sent with other data  -->
<select autofocus form="form_id" id="my_select">
    <optgroup label="ball game">
        <option disabled value="1">Basketball</option>
        <option disabled value="2">Football</option>
        <option value="3">Billiards</option>
        <option value="4" >Tennis</option>
        <option value="5" selected>Softball</option>
        <option value="6" selected>Table Tennis</option>
    </optgroup>
    <optgroup label="Athletics">
        <option value="7">100 rice</option>
        <option value="8">high jump</option>
        <option value="9">Shot-put</option>
    </optgroup>
</select>

<script src="D:\study\demo\jquery-1.12.4.js"></script>
<script>
    $(function(){
        $("#test_btn").click(function(){
            // After selecting the drop-down list, the value passed in the past is the value of the value attribute corresponding to < option >
            console.log($("#my_select").val());
            // text() is to see all the contents, and val() is to see the passed value
            console.log($("#my_select").text());
        })
    })

</script>

The effect is as follows:

About the default selection of drop-down list

Requirements: for example, when editing a student's information, you need to bring out all the information of the student first, such as the class. The class is a drop-down box, and you need to select the class of the student by default

<select id="demo">
    <option>1 class</option>
    <option selected>2 class</option>
    <option>3 class</option>
    <option value="4">4 class</option>
</select>

<input type="button" value="Toggle default options" class="button" />

<script src="D:\study\demo\jquery-1.12.4.js"></script>

<script>
    $(function(){
        $(".button").click(function(){
            // Knowledge point: modify the value = "modified value" of the select tag through jquery. If the value of the option under the select is equal to the value, the value will be displayed by default
            // The back end returns the class id of the student. Here, you only need to set the corresponding value = class id in the drop-down list to meet the requirements
            $("#demo").val("4");
            // If you want to click the button, it will become 3 shifts. Since this option does not display the declaration value, it needs to be modified to 								$ ("#demo").val("3 shifts");
        })
        
    })
</script>

The results are as follows: