页面中的 JavaScript 数据

发布于 2024-09-17 17:13:44 字数 259 浏览 2 评论 0原文

我有一个带有 2 个列表框（HTML 选择控件）的网页。第一个列表框是多选的并且包含大量元素。

当我在第一个列表框中选择一个或多个元素时，第二个列表框的内容必须根据所选值进行更改。这些值必须从数据库中获取。因为选择必须立即生效，所以我必须在客户端完成所有这些操作，而无需回调/回发。这意味着在页面加载时注入数据库的内容并使用 JQuery 对其进行处理。

您建议采用什么方法在页面中存储此类数据？你能指出一些现有的解决方案吗？

我什至不知道如何谷歌这个。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

好多鱼好多余 2024-09-24 17:13:44

我将创建一个对象来保存数组中的不同项目。示例：

var values = {
    cat1: ["item1", "item2", ...],
    cat2: ["item1", "item2", ...]
}

每当从第一个 select 中选择一个元素时，请使用 values[selectedValue] 查找该值，这将为您提供其他 select 的项目> 盒子。然后您只需为其生成 HTML 即可。

I would create an object that holds the different items in arrays. Example:

var values = {
    cat1: ["item1", "item2", ...],
    cat2: ["item1", "item2", ...]
}

Whenever an element is selected from the first select, look up this value with values[selectedValue] which gives you the items for the other select box. Then you just have to generate the HTML for it.

回复收藏 0 原文

寄意 2024-09-24 17:13:44

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    // Simple plugin that compares two arrays
    jQuery.fn.compare = function(t) {
        if (this.length != t.length) { 
            return false; 
        }
        var a = this.sort(),
            b = t.sort();
        for (var i = 0; t[i]; i++) {
            if (a[i] !== b[i]) { 
                return false;
            }
        }
        return true;
    };


    // Those rules should be fetched from the server
    var rules = [ 
        // select the first value if 1, 2 and 5 are selected
        { value: '1', selectedValues: [ '1', '2', '5' ] }, 
        // select the second value if 2 and 4 are selected
        { value: '2', selectedValues: [ '2', '4' ] }, 
        // select the third value if 3 is selected
        { value: '3', selectedValues: [ '3' ] }
    ];

    $(function() {
        // whenever the selection in the multiselect box changes:
        $('#first').change(function() {
            // get the array of all selected elements
            var selectedValues = $(this).val();

            // verify if this array matches any of the defined rules
            $(rules).each(function(index, rule) {
                if ($(selectedValues).compare(rule.selectedValues)) {
                    // if we have a match select the corresponding value in the second list
                    $('#second').val(rule.value);
                }
            })
        });
    });
    </script>

</head>
<body>

<select multiple="multiple" id="first">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
    <option value="4">value4</option>
    <option value="5">value5</option>
</select>

<select id="second">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    // Simple plugin that compares two arrays
    jQuery.fn.compare = function(t) {
        if (this.length != t.length) { 
            return false; 
        }
        var a = this.sort(),
            b = t.sort();
        for (var i = 0; t[i]; i++) {
            if (a[i] !== b[i]) { 
                return false;
            }
        }
        return true;
    };


    // Those rules should be fetched from the server
    var rules = [ 
        // select the first value if 1, 2 and 5 are selected
        { value: '1', selectedValues: [ '1', '2', '5' ] }, 
        // select the second value if 2 and 4 are selected
        { value: '2', selectedValues: [ '2', '4' ] }, 
        // select the third value if 3 is selected
        { value: '3', selectedValues: [ '3' ] }
    ];

    $(function() {
        // whenever the selection in the multiselect box changes:
        $('#first').change(function() {
            // get the array of all selected elements
            var selectedValues = $(this).val();

            // verify if this array matches any of the defined rules
            $(rules).each(function(index, rule) {
                if ($(selectedValues).compare(rule.selectedValues)) {
                    // if we have a match select the corresponding value in the second list
                    $('#second').val(rule.value);
                }
            })
        });
    });
    </script>

</head>
<body>

<select multiple="multiple" id="first">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
    <option value="4">value4</option>
    <option value="5">value5</option>
</select>

<select id="second">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select>

</body>
</html>

回复收藏 0 原文