Получить данные в раскрывающемся меню ajax с помощью PHP MySql JQuery

Я создал динамическое раскрывающееся меню для нескольких стран, используя Jquery/PHP/MySql. это сработало нормально, и я store/put страна/штат/город для каждого пользователя в базе данных MySql, например так (usertable) :

id  |  country  | state | town |
 1  |     1     |   1   |   1  |
 2  |     1     |   1   |   3  |
 3  |     1     |   2   |   8  |

теперь на странице edituser.php мне нужно fetch/retrieve данные MySql (usertable) в раскрывающийся список Jquery/Ajax. я звоню edituser.php?id=1 Теперь мне нужно распечатать/показать данные пользователя dropdown Ajax для редактирования пользователя страны/штата/города.

Как я могу получить/распечатать/показать это?

JS:

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
// jquery library file
<script type="text/javascript">

/*This function is called when state dropdown value change*/
function selectState(state_id){
  if(state_id!="-1"){
    loadData('city',state_id);
  }else{
    $("#city_dropdown").html("<option value='-1'>Select city</option>");
  }
}

/*This function is called when city dropdown value change*/
function selectCity(country_id){
 if(country_id!="-1"){
   loadData('state',country_id);
   $("#city_dropdown").html("<option value='-1'>Select city</option>");
 }else{
  $("#state_dropdown").html("<option value='-1'>Select state</option>");
   $("#city_dropdown").html("<option value='-1'>Select city</option>");
 }
}

/*This is the main content load function, and it will
     called whenever any valid dropdown value changed.*/
function loadData(loadType,loadId){
  var dataString = 'loadType='+ loadType +'&loadId='+ loadId;
  $("#"+loadType+"_loader").show();
  $("#"+loadType+"_loader").fadeIn(400).
        html('Please wait... <img src="image/loading.gif" />');
  $.ajax({
     type: "POST",
     url: "loadData.php",
     data: dataString,
     cache: false,
     success: function(result){
       $("#"+loadType+"_loader").hide();
       $("#"+loadType+"_dropdown").
       html("<option value='-1'>Select "+loadType+"</option>");
       $("#"+loadType+"_dropdown").append(result);
     }
   });
}
</script>

HTML:

/*This code will show country dropdown list*/
<select onchange="selectCity(this.options[this.selectedIndex].value)">
   <option value="-1">Select country</option>
   <?php
     while($rowCountry=mysql_fetch_array($resCountry)){
   ?>
     <option value="<?php echo $rowCountry['id']?>">
            <?php echo $rowCountry['country_name']?>
     </option>
   <?php
   }
   ?>
</select>

/*State dropdown list*/
<select id="state_dropdown"
     onchange="selectState(this.options[this.selectedIndex].value)">
<option value="-1">Select state</option>
</select>
<span id="state_loader"></span>

/*City dropdown list*/
<select id="city_dropdown">
<option value="-1">Select city</option>
</select>
<span id="city_loader"></span>

Loaddata.php

include('dbConnect.inc.php');
$loadType=$_POST['loadType'];
$loadId=$_POST['loadId'];

if($loadType=="state"){
   $sql="select id,state_name from state_test where
         country_id='".$loadId."' order by state_name asc";
}else{
   $sql="select id,city_name from city_test where
         state_id='".$loadId."' order by city_name asc";
}
$res=mysql_query($sql);
$check=mysql_num_rows($res);
if($check > 0){
   $HTML="";
   while($row=mysql_fetch_array($res)){
      $HTML.="<option value='".$row['id']."'>".$row['1']."</option>";
   }
   echo $HTML;
}

mysql php drop-down-menu jquery ajax
person Pink Code    schedule 29.03.2014    source источник
comment
когда вы запускаете это, вы видите image/loading.gif мне интересно, где вызов не работает. Подход кажется правильным.   -  person Victory    schedule 29.03.2014
comment
У вас есть много вещей, которые сделают ваш код лучше и лучше, я написал некоторые из них в своем ответе и дал вам пример того, как достичь того, что вы ищете.   -  person Federico J.    schedule 29.03.2014

Ответы (2)


arrow_upward
0
arrow_downward

Мало кто думает о вашем коде

  • С AJAX попробуйте использовать JSON для отправки и получения данных, это даст вам больше свободы в отношении переменных и пользовательского интерфейса.

  • Поскольку вы используете jQuery, старайтесь использовать его как можно чаще, не определяя онлайн-события, если вы сгруппируете их в скрипте, вам будет проще им управлять.

  • Что касается выбора, перезагрузить их довольно сложно. Я помню, что в IE я не мог добавлять параметры, поэтому вам нужно загрузить ВЕСЬ выбор.

  • Не используйте функции PHP mysql_query, они устарели. Прочитайте и примените это: Как я могу предотвратить внедрение SQL в PHP?

  • При загрузке значений из AJAX вы должны прикрепить обработчик к элементам DOM, поэтому используйте функцию .on(), чтобы убедиться, что она привязывает обработчик к элементам.

  • Попробуйте использовать более новые библиотеки jQuery, так как они быстрее, мощнее и имеют повышенную производительность, 1.4 довольно старая...

Я написал вам пример выпадающего списка стран, используя вышеуказанные вещи, чтобы дать вам представление о том, как этого добиться, возьмите то, что, по вашему мнению, вам нравится:

index.html:

<html>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>

    <body>

    <script>
    $(document).ready(function () {
        $(document).on('change', '#div_country select, #div_state select', function () {
            var $type = $(this).attr('data-type');
            var $id = $(this).val();

            if ( $id != -1 ) {
                loadSelect( $type, $id );
            }

        });

        function loadSelect( $type, $id ) {
            $.ajax({
                type: 'post',
                url: 'states.php',
                cache: false,
                data: {
                    'type': $type
                ,   'id': $id
                },
                dataType: 'json',
                success: function (data) {
                    if ( data.result == true ) {
                        if (data.html !== undefined) {
                            var $div = '';
                            if ( $type == 'country') {
                                $div = 'state';
                            } else {
                                $div = 'city';
                            }
                            $( "#div_" + $div ).html(data.html);
                        }
                    } else {
                        alert('Something went wrong!');
                    }
                }
            });
        }

    });
    </script>

    <div id="div_country">
        <select data-type="country">
            <option value="-1">Select Country</option>
            <option value="1">Spain</option>
            <option value="2">France</option>
            <option value="3">Germany</option>
        </select>
    </div>

    <div id="div_state">
        <select data-type="state">
            <option value="-1">Select Country</option>
        </select>
    </div>

    <div id="div_city">
        <select>
            <option value="-1">Select State</option>
        </select>
    </div>

    </body>
</html>

state.php

<?php
$type = isset( $_POST['type'] ) ? $_POST['type'] : '';

if ( !empty( $type ) ) {
    switch ($type) {
        case 'country':
            $result = true;
            $html = '<select data-type="state">
                        <option value="-1">Select State</option>
                        <option value="1">state 1</option>
                        <option value="2">state 2</option>
                    </select>';
        break;
        case 'state':
            $result = true;
            $html = '<select data-type="city">
                        <option value="-1">Select City</option>
                        <option value="1">city 1</option>
                        <option value="2">city 2</option>
                    </select>';
        break;
        default:
            $result = false;
            $html = '';
        break;
    }
}

$data = array(
    'result' => $result,
    'html' => $html
);

Я добавил, чтобы дать вам представление о том, как этого добиться, это отдельный пример, и вы увидите изменения в раскрывающемся списке. Вам придется добавить логику PHP, но я хотел показать вам лучший подход, XD

person Federico J.    schedule 29.03.2014

arrow_upward
0
arrow_downward

Я думаю, что выпадающий виджет Kendo UI решит эту проблему. Там есть функция каскада.

person Community    schedule 29.03.2014