Ajax, Json, селекторы, которые зависят друг от друга - PullRequest
Новая
       18

Ajax, Json, селекторы, которые зависят друг от друга

0 голосов
/ 13 декабря 2010

Привет У меня есть 3 селектора, где продукты зависят от типа, а количество продуктов зависит от продуктов.

Тип -> Продукты -> Количество продуктов

Я загружаю все изСервер MySQL и извлеките данные с помощью $ .getJSON.Поэтому, когда вы загружаете типы, он автоматически заполняет продукты именами и т. Д.

Проблема, с которой я столкнулся сейчас, заключается в том, что я хочу, чтобы количество продуктов менялось при изменении продукта, но если вы посмотрите на примердалее вы увидите, что это не так.

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

Это произойдет только тогда, когда вы измените название продукта.

Я хочу, чтобы это автоматически изменилось, как мне это сделать?

Заранее спасибо!

Этокод, который я использую, 

<form>
    Type:
    <select name="name" id="lensType">
        <option selected>Endagslins</option>
        <option>Dygnet-runt-lins</option>
        <option>2-veckorslins</option>
        <option>Manadslins</option>
    </select>
    Product:
    <select name="productName" id="products">
    </select>
    Number of products:
    <select name="numberOfLenses" id="numberOfLenses">
    </select>

</form>


<script type="text/javascript">
    function getProducts() {

        $.getJSON('getProducts.php', {lensType:$('#lensType').val()}, function(data) {

            var select = $('#products');
            var options = select.attr('options');
            $('option', select).remove();

            $.each(data, function(index, array) {
                options[options.length] = new Option(array['productName']);
            });

        });

    }

    $(document).ready(function() {

        getProducts();
        $('#lensType').change(function() {
            getProducts();
        });

    });

    function getNumberOfLenses() {

        $.getJSON('getNumberOfLenses.php', {productName:$('#products').val()}, function(data) {

            var select = $('#numberOfLenses');
            var options = select.attr('options');
            $('option', select).remove();

            $.each(data, function(index, array) {
                options[options.length] = new Option(array['numberOfLenses']);
            });

        });

    }

    $(document).ready(function() {

        getNumberOfLenses();
        $('#products').change(function() {
            getNumberOfLenses();
        });

    });

</script>

1 Ответ

0 голосов
/ 14 декабря 2010

Я сам разобрался:)

Я использовал этот код 

function getProducts() {

    $.getJSON('getProducts.php', {lensType:$('#lensType').val()}, function(data) {

        var select = $('#products');
        var options = select.attr('options');
        $('option', select).remove();

        $.each(data, function(index, array) {
            options[options.length] = new Option(array['productName']);
        });

        getNumberOfLenses();


    });

}

function getNumberOfLenses() {

    $.getJSON('getNumberOfLenses.php', {productName:$('#products').val()}, function(data) {

        var select = $('#numberOfLenses');
        var options = select.attr('options');
        $('option', select).remove();

        $.each(data, function(index, array) {
            options[options.length] = new Option(array['numberOfLenses']);
        });

    });

}

$(document).ready(function() {
    getProducts();
    $('#lensType').change(function() {
        getProducts();
    });

    $('#products').change(function() {
        getNumberOfLenses();
    });

});
...