Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

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

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
alcani
Asked:
alcani
1 Solution
 
leakim971PluritechnicianCommented:
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
 
GewgalaCommented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now