Вывод элементов выпадающего списка. - JavaScript, Ajax

Ankumo · 10.07.2016, 19:07

Доброго времени суток! Имеется таблица товаров в БД, товар должен относиться к категории и подкатегории (в моем случае это, к примеру: Роза Белая, ее категория - срезка, подкатегория - розы). Также соответственно и имеются 2 таблицы в БД с категориями и подкатегориями, связанные с таблицей товаров путем привязки к каждой строке с товаром id его категории и подкатегории. Пытаюсь сделать форму продажи товаров, здесь нужно, чтобы пользователь выбрал сначала категорию и подкатегорию, а затем смог выбирать товары, которые относятся к ним(чтобы не выбирать из большого списка). Уже сломал голову как такое можно сделать, учитывая следующее: в моем случае я сразу при загрузке страницы считываю и заношу в 3 массива на странице продажи(php) категории, подкатегории и товары. В массиве товаров разумеется есть айдишники категорий и подкатегорий каждого товара. Так как это форма продажи, то у меня динамически наполняется таблица с input`ами и select`ами в строках для заполнения данных о продаваемых товарах. Как можно связать эти 3 select`a, 2 из которых с категориями и подкатегориями уже будут сразу заполнены из таблиц, а вот содержание 3-го select`a должно по onchange меняться в зависимости от того, что выбрали в первых двух?
p.s. я так понимаю что мне здесь придется использовать ajax, проблема встает на уровне - как передать, не перезагружая страницу, странице продажи на php value двух select`ов, и в зависимости от этого либо построить запрос на выборку из таблицы товаров, либо отсеять уже готовый, содержащий всю таблицу. В конечном итоге, 3-ий select с товаром должен возвращать id товара.

pompiduskus · 10.07.2016, 20:43

Это просто ПРИМЕР.

Тут небольшая логика, запросы AJXA просто с эмулировал. Сами запросы дальше.

Код:

 

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>no-ttl</title>
    <script type="text/javascript">
    // ================================================================
    function _byId(id){ return document.getElementById(id); }
    
    // ================================================================
    var catt_selector;
    var sub_catt_selector;
    var product_name_selector;

    window.addEventListener("load", function(){

        catt_selector = _byId( "catt_selector" );
        sub_catt_selector = _byId( "sub_catt_selector" );
        product_name_selector = _byId( "product_name_selector" );

    });


    // ================================================================
    function get_sub_cats( selector ) {
    
        // запрос на сервак 
        //var all_sub_cats = AJAX_GET("http://site.com/api/?get=sub_cats&for="+selector.value);

        // это просто эмуляция, как будто-бы онреально отправляет запрос на сервак
        console.log("get_sub_cats("+selector.value+");");
        var all_sub_cats = AJAX_GET( "sub_cat", selector.value );

        sub_catt_selector.innerHTML = '<option value="null">select</option>';

        for( i in all_sub_cats ){
            sub_catt_selector.innerHTML += '<option value="'+all_sub_cats[i]["value"]+'">'
            +all_sub_cats[i]["name"]+'</option>';
        }

    }

    // ================================================================
    function get_product_name( selector ) {

        console.log("get_product_name("+selector.value+");");
        var all_products = AJAX_GET( "product_name", selector.value );


        product_name_selector.innerHTML = '<option value="null">select</option>';

        for( i in all_products ){
            product_name_selector.innerHTML += '<option value="'+all_products[i]["value"]+'">'
            +all_products[i]["name"]+'</option>';
        }

    }

    // ================================================================
    function go_to_the_page_of(_val){

        alert("GO-TO: "+_val.value);


    }

    // ================================================================
    function AJAX_GET( _cat, _type){

        console.log("AJAX_GET("+_cat+", "+_type+");");

        mObject = [];

        if( _cat == "sub_cat" ){

            if( _type == "kaktusi"){

                mObject.push({ "value": "kaktus_1_value", "name": "kaktus_1_name"});
                mObject.push({ "value": "kaktus_2_value", "name": "kaktus_2_name"});

            }else if( _type == "cveti"){
                mObject.push({ "value": "cveti_1_value", "name": "cveti_1_name"});
                mObject.push({ "value": "cveti_2_value", "name": "cveti_2_name"});

            }else if( _type == "pomidori"){
                mObject.push({ "value": "pomidori_1_value", "name": "pomidori_1_name"});
                mObject.push({ "value": "pomidori_2_value", "name": "pomidori_2_name"});

            }

        }else{
            console.log("_type: "+_type);
            if( _type == "kaktus_1_value"){
                mObject.push({ "value": "http://site.com/super_kaktus", "name": "SuperKaktus"});
            }else if( _type == "kaktus_2_value"){
                mObject.push({ "value": "http://site.com/super_kaktus_2", "name": "SuperKaktus-2"});
            }
        }

        return mObject;

    }

    // ================================================================

    </script>

</head>
<body>

    <form id="search_form">
        
        <!-- ============================================== -->
        <select id="catt_selector" onchange="get_sub_cats(this)">

            <option value="cveti">цветы</option>
            <option value="kaktusi">кактусы</option>
            <option value="pomidori">помидоры</option>

        </select><br/>
        <!-- ============================================== -->
        <select id="sub_catt_selector" onchange="get_product_name(this)">

        </select><br/>
        <!-- ============================================== -->
        <select id="product_name_selector" onchange="go_to_the_page_of(this)">

        </select>
        <!-- ============================================== -->

    </form>

</body>
</html>

Ну сами запросы, просто AJAXом. Есть простой вариант почти Кросс-Браузерного решения без чужих библиотек. Чистый JS

PHP код:


			
// Объект XML-HTTP



function getXmlHttp(){



    var xmlHTTH;



    try{ 

        xmlHTTH = new ActiveXObject("MSXML2.XMLHTTP");



    }catch (e){



        try { 

            xmlHTTH = new ActiveXObject("Microsoft.XMLHTTP"); 



        }catch (e){ 

            xmlHTTH = new XMLHttpRequest(); 



        } 

    }



    return xmlHTTH;



}

pompiduskus · 10.07.2016, 20:44

И сами запросы. Ях их у себя взял, дак что там много вам не нужного.
Уберите что не нужно. Заголовки, и ввсе такое

// ------------------------------------------------------
// GET

PHP код:


			
function ajaxGET(url) {
    // -------------------------------------------
    var _AJAX_ = getXmlHttp();
    // -------------------------------------------
    _AJAX_.open('GET', url, true); // false SYNC
    // _AJAX_.setRequestHeader('Access-Control-Allow-Origin', '*');
    // _AJAX_.setRequestHeader('_status_', 'custom-data');
    // -------------------------------------------
    _AJAX_.onreadystatechange = function () {
        if(_AJAX_.readyState == 4 && _AJAX_.status == 200){
            // ---------------------------------------------------------
            // var seconds = new Date().getTime() / 1000;
            // var time = new Date().getTime();

            // _AJAX_.getAllResponseHeaders();      // 
            // _AJAX_.getResponseHeader('name');    // 
            // _AJAX_.readyState                    // == 4
            // _AJAX_.status                        // == 200
            // _AJAX_.responseText                  // == text response
            // ---------------------------------------------------------
        }
    }
    // -------------------------------------------
    _AJAX_.send(null);
}

// ------------------------------------------------------
// POST

PHP код:


			
function ajaxPOST(url, PostData){
    // -------------------------------------------
    var PostData = '';
        PostData += 'login=name';
        PostData += '&password=12345';

        //PostData = encodeURIComponent(PostData);
        //alert(encodeURIComponent(PostData));
        //alert(encodeURI(PostData));    
    // -------------------------------------------
    var _AJAX_ = getXmlHttp();
    // -------------------------------------------
    _AJAX_.open('POST',url, true); // false ASYNC         
    // -------------------------------------------
    //_AJAX_.setRequestHeader("Custom_name", "custom_data");
    //_AJAX_.setRequestHeader("Content-Type", "multipart/form-data");
    //_AJAX_.setRequestHeader("Content-Type", "text/html");
    //_AJAX_.setRequestHeader("Content-length", PostData.length);
    //_AJAX_.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    // -------------------------------------------
    _AJAX_.onreadystatechange = function () {
        if(_AJAX_.readyState == 4 && _AJAX_.status == 200){
            // ---------------------------------------------------------
            // var seconds = new Date().getTime() / 1000;
            // var time = new Date().getTime();

            // _AJAX_.getAllResponseHeaders();      // 
            // _AJAX_.getResponseHeader('name');    // 
            // _AJAX_.readyState                    // == 4
            // _AJAX_.status                        // == 200
            // _AJAX_.responseText                  // == text response
            // ---------------------------------------------------------
        }
    }
    // -------------------------------------------
    _AJAX_.send(PostData);
}

Ankumo · 10.07.2016, 23:57

Большое спасибо! Извлек много нового и полезного как для себя, так и для задачи

Некоторые моменты, конечно, остались непонятными, но это мне просто нужно читать про ajax, и чутка с ним попрактиковаться. Если вдруг у меня возникнут еще вопросы по теме, я допишу...

Ankumo · 11.07.2016, 14:24

Реализовал "по-совему"

Работает. Но однако надо сказать, что задача у меня была несколько иная. Мне нужно было при onchange селекта категории или подкатегории считывать обе и исходя из этого уже менять 3-ий селект с товарами. Ниже приведу реализацию(я в js вообще новичок так что если там будет много говнокода то не ругайте х)).
Сами селекты:

Код HTML:

<form action="index.php" method="POST" name="selling">
            <table align="center" class="standart-table">
                <tbody id="data">
                    <tr>
                        <td width="20px"><a>#</a></td>
                        <td width="150px"><a>Тип товара</a></td>
                        <td width="150px"><a>Подтип товара</a></td>
                        <td width="250px"><a>Наименование товара</a></td>
                        <td width="200px"><a>Редактирование данных</a></td>
                    </tr>
                    <tr>
                        <td class="numb"><a>1</a></td>
                        <td><select name="type[0]" required onchange="getItems(this);">
                            <?php
                                while($types = mysqli_fetch_assoc($typesQry)) 
                                    echo "<option value=\"".$types["id"]."\">".$types["name"]."</option>";
                            ?>
                            </select>
                        </td>
                        <td><select name="subtype[0]" required onchange="getItems(this);">
                            <?php
                                while($subtypes = mysqli_fetch_assoc($subtypesQry)) 
                                    echo "<option value=\"".$subtypes["id"]."\">".$subtypes["name"]."</option>";
                            ?>
                            </select>
                        </td>
                        <td>
                            <select name="item[0]" required>
                                <?php
                                while($items = mysqli_fetch_assoc($itemsQry)) 
                                    echo "<option value=\"".$items["id"]."\">".$items["name"]."</option>";
                                ?>
                            </select>
                        </td>                      
                        <td>
                            <a onclick="deleteField(this);" href="#" id="delete"><img src="remove.ico" alt="Удалить"></a>
                            <a onclick="addField();" href="#" id="add"><img src="add.ico" alt="Добавить"></a>
                        </td>
                    </tr>
                </tbody>
            </table></br>
            <center><input type="submit" value=" Продать " name="sellBtn" /></center>
        </form>

getItems(select):

Код HTML:

function getItems(select) {
        var regexFindBr = /[0-9]+/;
        var str = select.name;
        var pos = str.match(regexFindBr);
        
        var problem = $('select[name="item['+pos+']"');
        var problemTd = problem.parent();
        
        var typeval = $('select[name="type['+pos+']').val();
        var subtypeval = $('select[name="subtype['+pos+']').val();
        
        $.ajax({
            url: "getItemsDB.php",
            type: "post",
            data: {"type":typeval, "subtype":subtypeval},
            success: function(data) {        
                $(problem).remove();
                
                var newSel = document.createElement("select");
                newSel.name = "item["+pos+"]";
                
                var options='';
                var json = JSON.parse(data);               
                
                for(var value in json) {
                    options+='<option value='+json[value]["id"]+'>'+json[value]["name"]+'</option>';
                }
                
                $(newSel).append(options);
                $(problemTd).append(newSel);
            }
        });       
    }

ну и обработчик getItemsDB.php:

PHP код:


			
<?php

    $connect = mysqli_connect("localhost", "root", "", "freeway");

    $getItemsQry = "

        SELECT p.id, p.name 

        FROM product p

        WHERE p.type={$_POST["type"]}

        AND p.subtype={$_POST["subtype"]}

        ";

        

    $getItems = mysqli_query($connect, $getItemsQry);

    $items = @array();

    if($getItems && $connect) 

    if(mysqli_num_rows($getItems) > 0) {

    while($rows=mysqli_fetch_row($getItems)){

        array_push($items, array(

            "id" => $rows['0'],

            "name" => $rows['1']

        ));

    }

    echo json_encode($items);

    } else {

        echo "no";

    }

    else echo "nonono";

?>

pompiduskus · 11.07.2016, 15:43

Здорово! Ловишь на лету!

10.07.2016, 19:07	#1
Ankumo Регистрация: 15.05.2016 Сообщений: 4	Вывод элементов выпадающего списка. Доброго времени суток! Имеется таблица товаров в БД, товар должен относиться к категории и подкатегории (в моем случае это, к примеру: Роза Белая, ее категория - срезка, подкатегория - розы). Также соответственно и имеются 2 таблицы в БД с категориями и подкатегориями, связанные с таблицей товаров путем привязки к каждой строке с товаром id его категории и подкатегории. Пытаюсь сделать форму продажи товаров, здесь нужно, чтобы пользователь выбрал сначала категорию и подкатегорию, а затем смог выбирать товары, которые относятся к ним(чтобы не выбирать из большого списка). Уже сломал голову как такое можно сделать, учитывая следующее: в моем случае я сразу при загрузке страницы считываю и заношу в 3 массива на странице продажи(php) категории, подкатегории и товары. В массиве товаров разумеется есть айдишники категорий и подкатегорий каждого товара. Так как это форма продажи, то у меня динамически наполняется таблица с input`ами и select`ами в строках для заполнения данных о продаваемых товарах. Как можно связать эти 3 select`a, 2 из которых с категориями и подкатегориями уже будут сразу заполнены из таблиц, а вот содержание 3-го select`a должно по onchange меняться в зависимости от того, что выбрали в первых двух? p.s. я так понимаю что мне здесь придется использовать ajax, проблема встает на уровне - как передать, не перезагружая страницу, странице продажи на php value двух select`ов, и в зависимости от этого либо построить запрос на выборку из таблицы товаров, либо отсеять уже готовый, содержащий всю таблицу. В конечном итоге, 3-ий select с товаром должен возвращать id товара.

10.07.2016, 20:44	#3
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	И сами запросы. Ях их у себя взял, дак что там много вам не нужного. Уберите что не нужно. Заголовки, и ввсе такое // ------------------------------------------------------ // GET PHP код: function ajaxGET(url) { // ------------------------------------------- var _AJAX_ = getXmlHttp(); // ------------------------------------------- _AJAX_.open('GET', url, true); // false SYNC // _AJAX_.setRequestHeader('Access-Control-Allow-Origin', '*'); // _AJAX_.setRequestHeader('_status_', 'custom-data'); // ------------------------------------------- _AJAX_.onreadystatechange = function () { if(_AJAX_.readyState == 4 && _AJAX_.status == 200){ // --------------------------------------------------------- // var seconds = new Date().getTime() / 1000; // var time = new Date().getTime(); // _AJAX_.getAllResponseHeaders(); // // _AJAX_.getResponseHeader('name'); // // _AJAX_.readyState // == 4 // _AJAX_.status // == 200 // _AJAX_.responseText // == text response // --------------------------------------------------------- } } // ------------------------------------------- _AJAX_.send(null); } // ------------------------------------------------------ // POST PHP код: function ajaxPOST(url, PostData){ // ------------------------------------------- var PostData = ''; PostData += 'login=name'; PostData += '&password=12345'; //PostData = encodeURIComponent(PostData); //alert(encodeURIComponent(PostData)); //alert(encodeURI(PostData)); // ------------------------------------------- var _AJAX_ = getXmlHttp(); // ------------------------------------------- _AJAX_.open('POST',url, true); // false ASYNC // ------------------------------------------- //_AJAX_.setRequestHeader("Custom_name", "custom_data"); //_AJAX_.setRequestHeader("Content-Type", "multipart/form-data"); //_AJAX_.setRequestHeader("Content-Type", "text/html"); //_AJAX_.setRequestHeader("Content-length", PostData.length); //_AJAX_.setRequestHeader('Content-type','application/x-www-form-urlencoded'); // ------------------------------------------- _AJAX_.onreadystatechange = function () { if(_AJAX_.readyState == 4 && _AJAX_.status == 200){ // --------------------------------------------------------- // var seconds = new Date().getTime() / 1000; // var time = new Date().getTime(); // _AJAX_.getAllResponseHeaders(); // // _AJAX_.getResponseHeader('name'); // // _AJAX_.readyState // == 4 // _AJAX_.status // == 200 // _AJAX_.responseText // == text response // --------------------------------------------------------- } } // ------------------------------------------- _AJAX_.send(PostData); } <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

11.07.2016, 15:43	#6
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Здорово! Ловишь на лету! <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
обработка выпадающего списка	Leks123	PHP	2	12.08.2013 23:38
Настройка выпадающего списка	BenderMTB	Microsoft Office Excel	1	10.11.2012 10:17
Построение элементов выпадающего списка из базы	HDMI	PHP	4	29.03.2012 12:59
Создание выпадающего списка	Anastasia666	Microsoft Office Access	2	04.09.2011 17:57
Прокрутка выпадающего списка	SAndrus	Microsoft Office Excel	2	16.06.2007 17:52

10.07.2016, 23:57	#4
Ankumo Регистрация: 15.05.2016 Сообщений: 4	Большое спасибо! Извлек много нового и полезного как для себя, так и для задачи Некоторые моменты, конечно, остались непонятными, но это мне просто нужно читать про ajax, и чутка с ним попрактиковаться. Если вдруг у меня возникнут еще вопросы по теме, я допишу...