How to pass an array from HTML to Javascript?

Question

I have a form which has multiple <select> drop-down boxes. I wish to pass the value in these drop-down boxes as an array to a JavaScript function.

Currently my code is like:

<select name="findByMaterial" onChange="filterFilms('Material',this.value)">
                    {% for film in all_films %}
                        <option value="{{film.f_material}}">{{film.f_material}}</option>
                    {% endfor %}
                    </select>

Where all_films is a variable from Django framework (Most probably you need not concern yourself with it).

What I want to do is that even if I have multiple selects with different names such as findByMaterial and findByColor, and I change the findByColor, then it should call the filterFilms(String,Value) JS function.

Any pointers in the right direction would be appreciated a lot.

PS: This question is probably similar to how to pass array values to JavaScript function from html onchange action?, but it is definitely not what I am looking for.

CLarification: I wish to create a filter. Thus I would want to be able to access the attribute of color as well as material.

So you want to attach the same event to multiple ` – Ry- Oct 13 '13 at 05:34 — Ry-, Oct 13 '13 at 05:34
Yes, but passing different parameters. – Saket Jain Oct 13 '13 at 06:17 — Saket Jain, Oct 13 '13 at 06:17

thefourtheye · Accepted Answer · 2013-10-13T06:25:54.320

1

Online Demo : http://jsfiddle.net/thefourtheye/jRym8/

<html lang = "en">
    <head>
        <title> Document </title>
        <script>
            function filterFilms(selectBox) {
                var displayArea = document.getElementById("displayArea");
                displayArea.innerHTML = selectBox.id + "," + selectBox.value + "," + selectBox.selectedIndex + "," +
                    selectBox.options[selectBox.selectedIndex].text;
            }
        </script>
    </head>
    <body>
        <select onchange="filterFilms(this);" id="films">
            <option value="film1">Film Text 1</option>
            <option value="film2">Film Text 2</option>
            <option value="film3">Film Text 3</option>
        </select>

        <select onchange="filterFilms(this);" id="colors">
            <option value="color1">Color 1</option>
            <option value="color2">Color 2</option>
            <option value="color3">Color 3</option>
        </select>

        <div id="displayArea"/>
    </body>
</html>

You can use the same function to do this. Pass the current element as the parameter. And

You can get the id of the select box clicked with selectBox.id
You can get the selected option's value with selectBox.value
You can get the selected option's index with selectBox.selectedIndex
You can get the selected option's text with selectBox.options[selectBox.selectedIndex].text

edited Oct 13 '13 at 06:25

answered Oct 13 '13 at 05:45

thefourtheye

233,700
52
457
497

This answers the OP as asked, well done. I'd suggest going a step farther and separate the onChange events from the HTML and attach them from the script. – Josh KG Oct 13 '13 at 06:16
This seems good, but I really need to send the type of select that I am using. This is because sometimes the values of two different options of two different selects may match. – Saket Jain Oct 13 '13 at 06:22
@SaketJain Please check my updated answer. You can get the id of the selected box using `selectBox.id` – thefourtheye Oct 13 '13 at 06:26
@thefourtheye: Thanks! Any idea how I could access the attribute of `color` as well as `films` at the same time? – Saket Jain Oct 13 '13 at 06:30
@SaketJain You can use `var colors = document.getElementById("color");` to get the colors select box and then you can access the attributes with the `colors` object. – thefourtheye Oct 13 '13 at 06:31
@SaketJain You can gets the films also, in the same way. – thefourtheye Oct 13 '13 at 06:35

How to pass an array from HTML to Javascript?

1 Answers1

Linked