1. 程式人生 > >獲取多選下拉框(select標籤設定multiple屬性)的值

獲取多選下拉框(select標籤設定multiple屬性)的值

<select multiple>不能直接獲取value,需要藉助該元素的options屬性。如下:

<select id="select" multiple>
    <option value="1">1111</option>
    <option value="2">2222</option>
    <option value="3">3333</option>
</select >


<script>
    // 獲取select元素的options屬性
    const options = document.querySelector('#select').options

    const selectedValueArr = []
    for (let i = 0; i < options.length; i++) {
        // 如果該option被選中,則將它的value存入陣列
        if (options[i].selected) {
            selectedValueArr.push(options[i].value)
        }
    }

    // 如果後端需要字串形式,比如逗號分隔
    const selectedValueStr = selectedValueArr.join(',')

    // Ajax code here
    // ...
</script>