Данные Javascript на странице - PullRequest
Новая
       4

Данные Javascript на странице

2 голосов
/ 03 сентября 2010

У меня есть веб-страница с 2 списками (элемент управления HTML select). Первый список является множественным выбором и содержит огромное количество элементов.

Когда я выбираю один или несколько элементов в первом списке, содержимое второго списка должно меняться в зависимости от выбранных значений. Эти значения должны быть взяты из базы данных. Поскольку выбор должен работать мгновенно, я должен делать все это на стороне клиента без обратного вызова / обратной передачи. Это означает внедрение содержимого базы данных при загрузке страницы и обработку его с помощью JQuery.

Какой подход вы предлагаете для хранения таких данных на странице? Можете ли вы указать мне какое-нибудь существующее решение?

Я даже не знаю, как Google это.

Ответы [ 3 ]

2 голосов
/ 03 сентября 2010

Я бы создал объект, который содержит различные элементы в массивах.Пример: 

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

Всякий раз, когда элемент выбирается из первого select, найдите это значение с помощью values[selectedValue], которое дает вам элементы для другого поля select.Тогда вам просто нужно сгенерировать HTML для него.

1 голос
/ 03 сентября 2010 
<!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 голосов
/ 03 сентября 2010

Вы должны jQuery для получения данных по клику.

Может быть, это руководство поможет вам:
http://www.akchauhan.com/select-content-from-one-list-to-another-using-jquery/

Узнайте о jQuery здесь: http://docs.jquery.com/Tutorials

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...