Mysql
 sql >> Base de Dados >  >> RDS >> Mysql

2 caixas de entrada de preenchimento automático/sugestão usando jQuery ou Ajax com segunda caixa com base nas primeiras seleções com vários itens


Aqui está um procedimento muito simples. Vou apenas mostrar o esqueleto principal. A adição de flash-meat será da sua parte.

Suponha que temos dois <select> em ajax.php assim:
   <select id="parent">
        <option value="1">value1</option>
        <option value="2">value2</option>
        <option value="3">value3</option>
        <option value="4">value4</option>
    </select>

    <select id="child">

    </select>

Então o que precisamos? Precisamos preencher o segundo <select> no caso de sua seleção.

Aqui vem a parte javascript (ajax.php)
<script type="text/javascript">
            $(function(){                    
                $('#parent').change(function(){ //on change event
                var parentVal = $('#parent').val(); //<----- get the value from the parent select
                $.ajax({
                    url     : 'process.php', //the url you are sending datas to which will again send the result
                    type    : 'GET', //type of request, GET or POST
                    data    : { parentValue: parentVal}, //Data you are sending
                    success : function(data){$('#child').html(data)}, // On success, it will populate the 2nd select
                    error   : function(){alert('an error has occured')} //error message
                })
            })

            })
    </script>

Isso enviará a solicitação para process.php

Agora vem o process.php

Aqui precisamos dos dados para preencher o segundo <select>

Agora, o que está dentro de <select> ?

<option value="someValue">someText</option>

Você precisa produzir algo assim:
    <option value="11">value11</option>
    <option value="12">value12</option>
    <option value="13">value13</option>
    <option value="14">value14</option>

O valor e o interior do texto enchem-se com suas necessidades.

Como virá do banco de dados:
  • Você pode obter o valor de seleção pai em process.php com $_GET['parentValue']
  • Com esse valor, consulte o banco de dados
  • Em seguida, a partir do resultado retornado do banco de dados, use um loop while , foreach ou for (dependendo da maneira como você está recuperando), faça o <option value="someValue">someText</option> .
  • você terminou!

Para seleção múltipla

para tornar a vida um pouco mais fácil, você pode usar chosen multiselect

Um conselho

mysql_* é preterido. use PDO em vez disso. Aqui está um link tutorial