Chain dropdown menus with HTML and JavaScript and another quick question about the forums

[DevalRDH]

I just started learning to code a few days ago and was trying to do something that acts like a calculator for high school level maths and ran into a problem. I was trying to use HTML to create two drop down menus, but then use Java script so that the second one’s options were dependent on the first one’s. Unfortunately, all of the options except the first one on the second menu seemed to remain blank.

I would also appreciate knowing how to include code in a post, if that’s acceptable here

(http://codepen.io/devalrdh/pen/xwKXMo)

please also explain what I did wrong in terms that a beginner would understand, thanks!

edit for explanation if needed:

I first created a dropdown with onchange: function():

<form>
      <select id="functionList" onchange="answerFormChange()" style="font-size:14px;">
        <option> choose </option>
        <option> one </option>
        <option> two </option>
      </select>
    </form>

I then created a second one with blank options that have ids

<form>
      <select id="answerFormList"  style="font-size:14px;">
        <option> choose</option>
        <option id="option1"> </option>
        <option 1d="option2"> </option>
        <option id="option3"> </option>
      </select>
    </form>

I used the option ids to try to edit them from JavaScript depending on what was pressed on the first dropdown

function answerFormChange(){
  if (functionList.options[functionList.selectedIndex].text === "choose") {
    document.getElementById("option1").innerHTML = "choose";
    document.getElementById("option2").innerHTML = "choose";
    document.getElementById("option3").innerHTML = "choose";
  }}

Is there something wrong with using document.getElementById to insert into HTML so many times?

[ralphm]

@DevalRDH

I would also appreciate knowing how to include code in a post, if that’s acceptable here.

Yep, it sure is! But you may need just to spend a few minutes here, reading posts etc. to lift your trust level. (It only takes a few minutes.) Then you can post code etc. (Actually, I thought you could anyway, but o well.) There is a </> that formats your code when you highlight it, or you can use Markdown code formatting.

I moved your post to the JS forum, as you’ll need that to make your dropdown work.

[DevalRDH]

Thank you! I just wasn’t sure whether such a basic problem would bother everyone in the JavaScript forum

[PaulOB]

You may want to fix this first

 1d="option2"

It should be:

 id="option2"

I’ll leave the js to someone else to ratify.

[DevalRDH]

Thank you! I always seem to miss simple errors like that. I’d also like to know whether this is a really ineffiecient way of doing this as I felt like there must be a better way while i was writing it

[AllanP]

The following script allows you to select a Country and then populate a 2nd dropdown list with several cities.

<script type="text/javascript">
var A= [];
A["Australia"]=["Select City ...","Sydney","Melbourne","Brisbane","Adelaide"];
A["UK"]=["Select City ...","London","York","Manchester","Cardiff","Liverpool"];
//
 function process(obj,sNumb) 
  { var indx, targetObj, targArray, thisItem, i=0;  
    indx=obj.options.selectedIndex;
    if(indx===0){ return; }                      // invalid selection 
   // ---------  
 // put object items list into next select box
     targetObj=document.getElementById("select_"+sNumb);
     targetObj.disabled=false;
 // clear existing options. 
     targetObj.options.length=0;              
     thisItem=null;                         
 // build options list
     targArray = A[obj.options[indx].value];   
     for(i=0;i<targArray.length;i++)
       { thisItem=targArray[i];      
         // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag) 
           targetObj.options[i]=new Option(thisItem,thisItem,false,false);    
       } 
     obj.blur(); 
    }
 // -------
 function rSet(aForm)
  { // reset to original values
    var selectObj_2=document.getElementById("select_2");
    selectObj_2.length=0; 
    selectObj_2.disabled=true; 
    aForm.reset();
  }   
// --------
</script>

Here is the whole working program on JSFiddle