jQuery - Lấy val và text của select

---o0o---

Link bài viết gốc cho multiple select list
Link bài viết gốc cho select list

1. Lấy giá trị của select list

Có 1 select list như sau, với mỗi lần select 1 giá trị ta sẽ lấy được value của option đó bằng jQuery

    <select id="selectList">
        <option value="one">First Option</option>
        <option value="two">Second Option</option>
        <option value="three">Third Option</option>
    </select>

    <script>
    //lấy val
    $('#selectList').val();
    //lấy text
    $('#selectList :selected').text();
    </script>
    

First Option Second Option Third Option

Note: Vì dùng jQuery nên nhớ gọi thư viện jQuery ;)

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    

2. Lấy giá trị của multiple select list

Với mỗi lần chọn một hay nhiều giá trị, ta đều thu được val và text

Lấy tất cả val hoặc text trong 1 lần =>> trả về 1 xâu

    <select name="select_list" multiple="multiple" id="multi-selectbox">
        <option value="val1">option 1</option>
        <option value="val2">option 2</option>
        <option value="val3">option 3</option>
        <option value="val4">option 4</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#multi-selectbox').change(function(){
                alert($('#multi-selectbox').val());
            });
        });
    </script>
    

Tương tự với lấy text

    $(document).ready(function() {
        $('#multi-selectbox').change(function(){
            alert($('#multi-selectbox :selected').text());
        });
    });
    

option 1 option 2 option 3 option 4

Lấy từng val và text theo thứ tự

Dùng đoạn script sau

    <script>
        $(document).ready(function() {
            $('#multi-selectbox').change(function(){
                $("#multi-selectbox option:selected").each(function() {
                    alert($(this).val());
                });
            });
        });
    </script>