Dynamic multiselect with bootstrap

Asked

Viewed 848 times

0

good afternoon.

I’m having a big problem. I have a dynamic select combo which is the following order:

  1. Parents
  2. UF
  3. City
  4. Neighborhood

This information is loaded from MYSQL. Considering that 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 IS MY.PHP TEST 

    <!-- 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>

jquery-ui-multiselect

  • Would it look like this: http://jsfiddle.net/filadown/pL4hg76b/11/ ? You can also fill them in and then use the .multiselect('rebuild');

1 answer

1

Browser other questions tagged jquery-ui-multiselect

You are not signed in. Login or sign up in order to post.