Вопрос по php, javascript, jquery, html, mysql – Заполните раскрывающийся список HTML / PHP на основе первого выпадающего списка

1

У меня есть 1 выпадающий список, который используется для категории (еда, напитки и т. Д.)

В моей таблице MYSQL (t_menu_category) у меня есть:

+----+---------------+-------------------+----------------------+
| ID | category_name | sub_category_name | category_description |
+----+---------------+-------------------+----------------------+
|  1 | Food          | Curries           | Spicy Curries        |
|  2 | Food          | Meat              | Lamb, Pork, Chicken  |
|  3 | Drinks        | Alcohol           | Fine Tasting Lager   |
|  4 | Desserts      | Cakes             | Chocolate Cake       |
+----+---------------+-------------------+----------------------+

У меня есть первый выпадающий список, показывающий значения «category_name», но я хочу, чтобы, когда я выбираю еду, я хотел обновить второе выпадающее окно и просто отображать значения «sub_category_name», где, например, первый выбор. «Еда» равняется «Еда» в базе данных.

Поэтому, если я выбрал «Еда» в первом раскрывающемся списке, во втором раскрывающемся списке будут отображаться только «Карри» и «Мясо».

HTML:

<form method="post" action="<?php $_SERVER['PHP_SELF'] ?>"> 

    <p> 
        <label for="item_name">Item Name</label>
        <input id="item_name" name="item_name" required="required" type="text" placeholder="Item Name" />
     </p>
     <p>
        <label for="item_description">Item Description</label>
        <textarea rows="3" cols="100%" required="required" name="item_description">Item Description</textarea>
    </p>
    <p>
        <label for="item_category">Item Category</label>
        <select id="item_category" name="item_category" required="required">
            <option selected="selected">-- Select Category --</option>
            <?php 
            $sql = mysql_query("SELECT category_name FROM t_menu_category");
            while ($row = mysql_fetch_array($sql)){
            ?>

            <option value="<?php echo $row['category_name']; ?>"><?php echo $row['category_name']; ?></option>

            <?php
            // close while loop 
            }
            ?>
        </select>
    </p>

    <p class="center"><input class="submit" type="submit" name="submit" value="Add Menu Item"/></p>
</form>

Любая помощь будет высоко оценена :)

Одним из способов может быть помещение вашего PHP в другой файл (веб-сервис) и вызов его с помощью AJAX, когда выбор сделан в первом выборе. MamaWalter
Можете ли вы добавить немного больше информации о том, какой тип решения вы ищете? Вы хотите, чтобы это произошло в JavaScript в браузере? Или вы хотите, чтобы пользователь отправил форму, а затем перезагружал страницу со вторым раскрывающимся списком? Mike
Я хочу, чтобы второй раскрывающийся список был отключен, а затем, когда пользователь выбирает параметр из первого раскрывающегося списка, он сразу включается со значениями, соответствующими первому раскрывающемуся списку. Я видел множество примеров через этот сайт, но не могу заставить их работать. Danny
я понимаю, что вы можете увидеть только 1 раскрывающийся список HTML, поскольку я оставил это, чтобы кто-то мог сказать мне, как это сделать, я попытался с помощью сценария, который получает идентификатор, а затем отправляет его в «ajax.php? value = Food», но ничего не происходит, если некоторые могли бы помочь, я был бы очень благодарен. Danny
Я ответил на аналогичный вопрос здесь:stackoverflow.com/questions/22728170/..., он имеет код для перезагрузки Dropbox в зависимости от отправленного значения. На самом деле, как говорит @MamaWalter, вам понадобится AJAX Chococroc

Ваш Ответ

1   ответ
1

getSubCategory.php

<?php
$category = "";
if(isset($_GET['category'])){
    $category = $_GET['category'];
}

/* Connect to the database, I'm using PDO but you could use mysqli */
$dsn = 'mysql:dbname=my_database;host=127.0.0.1';
$user = 'my_user';
$password = 'my_pass';

try {
    $dbh = new PDO($dsn, $user, $password);
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
}

$sql = 'SELECT sub_category_name as subCategory FROM t_menu_category WHERE category_name = :category';
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':category', $category);
$stmt->execute();

return  json_encode($stmt->fetchAll());

и добавьте несколько jquery для перехвата при выборе категории и запросите у сервера соответствующую подкатегорию:

<script>
    $(document).ready(function () {
        $('#item_category').on('change', function () {

            //get selected value from category drop down
            var category = $(this).val();

            //select subcategory drop down
            var selectSubCat = $('#item_sub_category');

            if ( category != -1 ) {

                // ask server for sub-categories
                $.getJSON( "getSubCategory.php?category="+category)
                .done(function( result) {    
                    // append each sub-category to second drop down   
                    $.each(result, function(item) {
                        selectSubCat.append($("<option />").val(item.subCategory).text(item.subCategory));
                    });
                    // enable sub-category drop down
                    selectSubCat.prop('disabled', false);                
                });

            } else {                
                // disable sub-category drop down
                selectSubCat.prop('disabled', 'disabled');
            }
        });    

    });
</script>

также добавьте значение в ваш первый вариант:

<option value="-1" selected="selected">-- Select Category --</option>

Похожие вопросы