Cara Menggunakan Selected Selector Dalam JQuery ~ Nyintak

Kali ini saya akan menjelaskan tentang Selected Selector JQuery. Apa itu Selected Selector? Selected Selector hampir sama fungsinya dengan Checked Selector, hanya saja Selected Selector digunakan untuk memilih option yang terseleksi.

Syntax yang digunakan :

$('#idSelect option:selected')

Menggunakan Selected Selector dalam single select dropdown

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#option').change(function(){
                var selectedOpt = $('#option option:selected');
                $('#divResult').html("Value = "+ selectedOpt.val() + ", Text = " + selectedOpt.text());
            });
        });
        </script>
    </head>
    <body>
        Negara :
        <select id="option">
            <option valie="">Pilih NEgara</option>
            <option value="Indonesian">Indonesian</option>
            <option value="Malaysian">Malaysian</option>
            <option value="Singapore">Singapore</option>
            <option value="Thailand">Thailand</option>
            <option value="Myanmar">Myanmar</option>
        </select> 
        <div id="divResult"></div>
    </body>
</html>

Menggunakan Selected Selector dalam multiple select option

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#option').change(function(){
                var selectedOpt = $('#option option:selected');
                if(selectedOpt.length > 0 ){
                    var resultStr = '';
                    selectedOpt.each(function(){
                        resultStr += "Value = "+ $(this).val() + ", Text = " + $(this).text() + "<br/>";
                    });
                    $('#divResult').html(resultStr);
                }
            });
        });
        </script>
    </head>
    <body>
        Negara :
        <select id="option" multiple="multiple">
            <option value="Indonesian">Indonesian</option>
            <option value="Malaysian">Malaysian</option>
            <option value="Singapore">Singapore</option>
            <option value="Thailand">Thailand</option>
            <option value="Myanmar">Myanmar</option>
        </select> 
        <div id="divResult"></div>
    </body>
</html>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Wednesday, 1 June 2016

Cara Menggunakan Selected Selector Dalam JQuery

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels