ansaurus

Question

Javascript data in page

Answer 1

A:

You should jQuery to fetch data on click.

Maybe this guide will help you:
http://www.akchauhan.com/select-content-from-one-list-to-another-using-jquery/

Learn about jQuery here: http://docs.jquery.com/Tutorials

Steven 2010-09-03 08:08:54

Answer 2

+2 A:

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.

Felix Kling 2010-09-03 08:08:55

Answer 3

+1 A:

<!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"&gt;&lt;/script&gt;
    <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>

Darin Dimitrov 2010-09-03 08:15:35

Answer 4

A:

You can try the columnnav jquery plugin.

PJP 2010-09-03 08:22:01

ansaurus

tags:

views:

answers:

Javascript data in page

related questions