1

I have a conditional dropdown menu which works but it depends on where I put it on the page. If I don't put it in a specific position the positions in the menu don't fill at all. The problem is also that I want to add a second conditional dropdown, and that one doesn't work regardless of where I put it. So my question is: do I need to add the script twice on the page to correspond the two forms I have? I actually want both drop downs to fill with the exact same words.

document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;

I'm guessing it's something related with the [0] there. I tried adding an id to the form and then writing the the second script document.forms('myId')[] but that didn't work either. How should I go about doing this?

<script type="text/javascript">

var categories = [];
categories["startList"] = ["Programming","Science","History","Business and Economics","Software","Languages","Do it Yourself","Others"];
categories["Programming"] = ["Java","C++","C.","Python","Html","Php","Mysql","ObjectiveC","Android","Others"];
categories["Science"] = ["Mathematics","Physics","Biology","Chemistry","Medicine","Astronomy","Statistics","Others"];
categories["Others"] = ["All"] 

var nLists = 2; // number of lists in the set

function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
        document.forms[0]['List'+i].length = 1;
        document.forms[0]['List'+i].selectedIndex = 0;
    }
    var nCat = categories[currCat];
    for (each in nCat)  {
        var nOption = document.createElement('option'); 
        var nData = document.createTextNode(nCat[each]); 
        nOption.setAttribute('value',nCat[each]); 
        nOption.appendChild(nData); 
        currList.appendChild(nOption); 
    } 
}

function getValue( L2, L1) {
    $.post( "", { List1: L1, List2: L2 } );
}

function init() {
    fillSelect('startList',document.forms[0]['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);    

</script>




<form action="" method="post">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Category</option>
</select>

&nbsp;
<select name='List2' onchange="getValue(this.value,this.form['List1'].value)">
<option selected >Subcategory</option>
</select>
<input type="Submit">
MaxArt
  • 22,200
  • 10
  • 82
  • 81
Jerome
  • 167
  • 1
  • 12
  • How do you "add a second conditional dropdown"? And what do you mean with "doesn't work"? – MaxArt Apr 18 '14 at 23:17
  • Well I tried copying the exact same javascript again below and then I added a similar form somewhere else in my page. I am new to javascript so it's probably a stupid way to do it. – Jerome Apr 18 '14 at 23:20
  • When I say it doesn't work, I mean the second form doesn't fill with options. It just says "category" "subcategory" but there is nothing that can be selected. – Jerome Apr 18 '14 at 23:22
  • Although I don't have a direct answer ready, have you considered using a JS template for this? It's the first thing that pops up in my mind. So easy to use; you can just parse an object in an html template and use conditionial statements / loops if you want. For example Underscore.js or Handlebars. It's definitely a lot more readable too. – html_programmer Apr 18 '14 at 23:27
  • I wasn't aware such a thing exists. Can you link me to an example or tell me where to search? – Jerome Apr 18 '14 at 23:29
  • Check out: http://stackoverflow.com/questions/4778881/how-to-use-underscore-js-as-a-template-engine I use it all the time. – html_programmer Apr 18 '14 at 23:37

1 Answers1

0

Fixed it. I just had to add either a selector or 1 there to correspond to my second form. 

 document.forms[1]['List'+i].length = 1;
            document.forms[1]['List'+i].selectedIndex = 0;
        }
        var nCat = categories[currCat];
        for (each in nCat)  {
            var nOption = document.createElement('option'); 
            var nData = document.createTextNode(nCat[each]); 
            nOption.setAttribute('value',nCat[each]); 
            nOption.appendChild(nData); 
            currList.appendChild(nOption); 
        } 
    }

    function getValue( L2, L1) {
        $.post( "", { List1: L1, List2: L2 } );
    }

    function init() {
        fillSelect('startList',document.forms[1]['List1'])
Jerome
  • 167
  • 1
  • 12