Solved

dynamic select file from data stored in other select file using JavaScript

Posted on 2011-09-09
2
271 Views
Last Modified: 2012-05-12
Hi Experts,

I’m trying to generate a dynamic select file from data stored in other select file using JavaScript

For example:

<select name="sample1" id="sample1">
  <option value="A1">AAA</option>
  <option value="A2">BBB</option>
  <option value="A3">CCC</option>
  <option value="B1">DDD</option>
  <option value="B2">EEE</option>
  <option value="C1">FFF</option>
  <option value="D1">GGG</option>

</select>

I’ll pass a parameter to the function, which is the first character of “option value”

Eg. “B”

I want to create a new array like that

<select name="sample1" id="sample1">
  <option value="1">DDD</option>
  <option value="2">EEE</option>
 </select>

Any idea?

Thanks
0
Comment
Question by:alcani
2 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
check this test page : http://jsfiddle.net/cje2m/1/
    var options = [];
    options["A1"] = [
        { "value":"1", "text":"DDD" },
        { "value":"2", "text":"EEE" },
        ];
    options["A2"] = [
        { "value":"1", "text":"FFF" },
        { "value":"2", "text":"SSS" },
        ];
    options["A3"] = []; // empty
    options["B1"] = []; // empty
    options["B2"] = []; // empty
    options["C1"] = [
        { "value":"1", "text":"SDF" },
        { "value":"2", "text":"FGH" },
        ];
    options["D1"] = []; // empty

    function update_sample2(val)
    {
        sample2 = document.getElementById("sample2");
        sample2.options.length = 0;
        for(var i=0;i<options[val].length;i++)
        {
            sample2.options[sample2.options.length] = new Option(options[val][i].text, options[val][i].value);
        }

        // check if there's options in the select else hide it, you may not need this, just remove it
        sample2.style.display = (sample2.options.length == 0)?"none":"block";
    } 

Open in new window


with :
<select name="sample1" id="sample1" onchange="update_sample2(this.value)">
  <option value="A1">AAA</option>
  <option value="A2">BBB</option>
  <option value="A3">CCC</option>
  <option value="B1">DDD</option>
  <option value="B2">EEE</option>
  <option value="C1">FFF</option>
  <option value="D1">GGG</option>
</select>

<select name="sample1" id="sample2"></select>
    

Open in new window

0
 
LVL 7

Accepted Solution

by:
Gewgala earned 500 total points
Comment Utility
function createSubMenuOptions(letter)
{
       var selectMain = document.getElementById("sample1");
       var selectSub = document.getElementById("subSample1");   

       // clear selectSub options
       selectSub.options.length = 0;

       for (var x = 0; x < selectMain.options.length; x++)
       {
             if (selectMain.option[x].value.substr(0, 1) == letter)
             {
                   var opt = document.createElement("option");
                   opt.value = selectMain.options[x].value;
                   opt.text = selectMain.options[x].text;
                   selectSub.options.add(opt);
             }
       }
}

Open in new window


The above javascript relies on your second select box (the one with filtered items) be named "subSample1" with no options defined, as such:

<select name="subSample1" id="subSample1">
 </select>

Open in new window


Now, when you pass in a letter such as "B" to the function createSubMenuOptions("B") it will add only the values of the sample1 select box that have a value that starts with "B" to the subSample1 select menu.

Hope this helps.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now