Dynamic Multiselect with bootstrap

0

Good afternoon.

I have a big problem. I have a dynamic select combo which is in the following order:

  • Parents
  • UF
  • City
  • Neighborhood
  • This information is loaded from MYSQL. Since it is a dynamic select, I need the neighborhood field to become a "multiselect". To select multiple neighborhoods at once.

    My code is this (combo.js):

        jQuery(document).ready(
    function() 
    {});
    
    $(pais).load('localizacoes.php?tipo=pais');
    
    $(pais).change(
        function() {
            if($(this).val() == 0) {
                alert('Você precisa informar um PAÍS!');
                $(this).focus();
            } else {
                $(estado).load('localizacoes.php?tipo=estado&pais=' + $(this).val());
            }
        }
    );
    
    $(estado).change(
        function() {
            if($(this).val() == 0) {
                alert('Você precisa informar o ESTADO!');
                $(this).focus();
            } else {        
                $(cidade).load('localizacoes.php?tipo=cidade&estado=' + $(this).val());
            }
        }
    );
    
    $(cidade).change(
        function() {
            if($(this).val() == 0) {
                alert('Você precisa informar a CIDADE!');
                $(this).focus();
            } else {        
                $(bairro).load('localizacoes.php?tipo=bairro&cidade=' + escape($(this).val()));
            }
        }
    );  
    
    $(bairro).change(
        function() {
            if($(this).val() == 0) {
                alert('Você precisa informar o BAIRRO!');
                $(this).focus();
            } else {        
                return true;
            }
        }
    );}
    

    HERE MY TEST.PHP                                                                    

        <!-- Include the plugin's CSS and JS: -->
        <script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script>
        <link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" type="text/css"/>
    </head>
    <body>
    
        <script type="text/javascript">
            $(document).ready(function () {
                $('#bairro').multiselect({
                    maxHeight: 10000
                });
            });
        </script>
    
        <form action="" method="post">
            <h1>Localizações</h1>
            <label><span>País:</span>
                <select name="pais" id="pais"></select>
            </label>
            <label><span>Estado:</span>
                <select name="estado" id="estado"><option value="0">--Primeiro o País--</option></select>
            </label>
            <label><span>Cidade:</span>
                <select name="cidade" id="cidade"><option value="0">--Primeiro o Estado--</option></select>
            </label>
            <label><span>Bairro:</span>
                <select name="bairro" id="bairro">
                    <option multiple="multiple" name="multiselect[]">--Primeiro a Cidade--</option></select>
            </label>
            <br />
            <label><input type="submit" value="Procurar"  />
    
        </form>
    
    
    </body>
    

        
    asked by anonymous 02.03.2016 / 21:21

    1 answer

    1

    link

    You can do something like this!

        
    02.03.2016 / 21:24