select

屬性列表

舉例：

<!-- 下拉框可見選項為2 -->
<select autofocus size=2 miltiple>
    <option>籃球</option>
    <option>足球</option>
    <option>檯球</option>
    <option>網球</option>
</select>



<!-- 被禁用 -->
<select disabled>
    <option>11</option>
    <option>2</option>
</select>
 

效果如圖：

option

與select標籤配合使用，否則是沒有意義的

屬性列表

value屬性：比如某個form表單中，某一項是通過下拉列表選擇的，這裡選擇<option value='1'>張三<option />，form表單該select標籤發到服務端對應的資料為 1,而不是張三

舉例1：

<select autofocus>
    <optgroup label="球類運動">
        <option disabled>籃球</option>
        <option disabled>足球</option>
        <option>檯球</option>
        <option >網球</option>
        <option selected>壘球</option>
        <!-- 多個option 有selected，選後面的 -->
        <option selected>乒乓球</option>
    </optgroup>
    <optgroup label="田徑">
        <option>100米</option>
        <option>跳高</option>
        <option>鉛球</option>
    </optgroup>
</select>

在瀏覽器的效果如下：

value屬性

定義送往伺服器的選項值。如果沒有顯示宣告該值，則預設為文字內容

比如： 如果這時候 選擇的是科比，去獲取id為"demo"的select標籤的 val() ,得到的是“科比”，但是如果選擇的是詹姆斯，去獲取id為"demo"的select標籤的 val() ,得到的是“james”

<select id="demo">
    <option>科比</option>
    <option value="james">詹姆斯</option>
</select>

舉例2：

<form id="form_id">
    <input type="button" id="test_btn" value="測試一下"/>
</form>
<!-- 這裡可以在表單外定義一個下拉框，只要該下拉框的 form屬性=對應form表單的id[可以選擇多個form] 這個資料還是會和form表單其他資料一同傳送  -->
<select autofocus form="form_id" id="my_select">
    <optgroup label="球類運動">
        <option disabled value="1">籃球</option>
        <option disabled value="2">足球</option>
        <option value="3">檯球</option>
        <option value="4" >網球</option>
        <option value="5" selected>壘球</option>
        <option value="6" selected>乒乓球</option>
    </optgroup>
    <optgroup label="田徑">
        <option value="7">100米</option>
        <option value="8">跳高</option>
        <option value="9">鉛球</option>
    </optgroup>
</select>

<script src="D:\study\demo\jquery-1.12.4.js"></script>
<script>
    $(function(){
        $("#test_btn").click(function(){
            // 選擇下拉列表之後，傳遞過去的值是  對應<option>的 value屬性的值
            console.log($("#my_select").val());
            // text()是看所有的內容，val()是看的傳遞的值
            console.log($("#my_select").text());
        })
    })

</script>

效果如下圖：

關於下拉列表的預設選擇問題

需求：比如編輯某個學生資訊，是需要先帶出該學生的所有資訊，比如所屬班級，所屬班級是一個下拉框，需要預設選擇該學生所處的班級

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

<input type="button" value="切換預設選項" class="button" />

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

<script>
    $(function(){
        $(".button").click(function(){
            // 知識點： 通過jquery 修改select標籤的value="改的值", 如果該select下的option的value有等於該值的,就預設展示該值
            // 後端返回該學生的所屬班級id,這裡只需要設定 下拉列表的對應value = 班級id 就可以滿足需求
            $("#demo").val("4");
            // 如過要點選按鈕就變成3班，由於這個option沒有顯示的宣告value,就需要修改為								$("#demo").val("3班");
        })
        
    })
</script>

實現效果如下：