Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 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 товара.
Ankumo вне форума Ответить с цитированием
Старый 10.07.2016, 20:43   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

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

Тут небольшая логика, запросы 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;


<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 10.07.2016, 20:44   #3
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

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

// ------------------------------------------------------
// GET
PHP код:
function ajaxGET(url) {
    
// -------------------------------------------
    
var _AJAX_ getXmlHttp();
    
// -------------------------------------------
    
_AJAX_.open('GET'urltrue); // false SYNC
    // _AJAX_.setRequestHeader('Access-Control-Allow-Origin', '*');
    // _AJAX_.setRequestHeader('_status_', 'custom-data');
    // -------------------------------------------
    
_AJAX_.onreadystatechange = function () {
        if(
_AJAX_.readyState == && _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(urlPostData){
    
// -------------------------------------------
    
var PostData '';
        
PostData += 'login=name';
        
PostData += '&password=12345';

        
//PostData = encodeURIComponent(PostData);
        //alert(encodeURIComponent(PostData));
        //alert(encodeURI(PostData));    
    // -------------------------------------------
    
var _AJAX_ getXmlHttp();
    
// -------------------------------------------
    
_AJAX_.open('POST',urltrue); // 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 == && _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/
pompiduskus вне форума Ответить с цитированием
Старый 10.07.2016, 23:57   #4
Ankumo
 
Регистрация: 15.05.2016
Сообщений: 4
По умолчанию

Большое спасибо! Извлек много нового и полезного как для себя, так и для задачи Некоторые моменты, конечно, остались непонятными, но это мне просто нужно читать про ajax, и чутка с ним попрактиковаться. Если вдруг у меня возникнут еще вопросы по теме, я допишу...
Ankumo вне форума Ответить с цитированием
Старый 11.07.2016, 14:24   #5
Ankumo
 
Регистрация: 15.05.2016
Сообщений: 4
По умолчанию

Реализовал "по-совему" Работает. Но однако надо сказать, что задача у меня была несколько иная. Мне нужно было при 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";
?>
Ankumo вне форума Ответить с цитированием
Старый 11.07.2016, 15:43   #6
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Здорово! Ловишь на лету!
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработка выпадающего списка 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