Question

您好我有3个选择器，产品取决于产品的类型和数量取决于产品。

类型 - ＆gt;产品 - ＆gt;产品数量

我从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>

Answer 1

我自己想出来了：）

我使用了这段代码

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();
    });

});

Ajax，Json，彼此依赖的选择器

1 个答案: