HTML select tag value does not immediately change after calling a function from script

Question

I'm new to HTML. I'm trying to retrieve a value from 1st select tag, and if the value is as expected, the 2nd select tag will appear below 1st select tag. Here's what I've been trying:

<ul id="MAIN">
      <li><span>1st Select Tag   :</span>
            <select onchange="createNewSelectTag()" id="SelectTag1">
                  <option>no</option>
                  <option>yes</option>
                  <option>maybe</option>
            </select>
      </li>

      <script language="javascript" type="text/javascript">
            function createNewSelectTag()
            {
                  /*check if 2nd select tag is already exist. if it is, cannot make another 2nd select tag*/
                  if (document.getElementById('createdSelectTag'))
                  {
                         if (document.getElementById('SelectTag1').selectedIndex == 0)
                         {
                               var element = document.getElementById('createdSelectTag');
                               element.parentNode.removeChild(element);
                         }
                  }
                  else
                  {
                         if (document.getElementById('SelectTag1').selectedIndex > 0)
                         {
                               var newSelectTag = '<li id="createdSelectTag"><span>2nd Select Tag   :</span>' +
                                                    '<select id="SelectTag2">' +
                                                         '<option value="a">A</option>' +
                                                         '<option value="b">B</option>' +
                                                         '<option value="c">C</option>' +
                                                     '</select>' +
                                                 '</li>';
                               document.getElementById('MAIN').innerHTML += newSelectTag;
                         }
                   }
            }
       </script>
</ul>

Now, clicking "no" in 1st select tag will remove the 2nd select tag, and clicking other options will create 2nd select tag, just as I have expected.

However, changing the 1st select tag for the first time does not immediately change the value of the 1st select tag even though the 2nd select tag is already generated below. For example, when the page is first loaded, the value of 1st select tag is by default "no". If I change it to "yes" or "maybe", the 2nd select tag is created, but the value of the 1st select tag is still "no". I need to double change it to change the value of 1st select tag. What have I done wrong?

Answer 1

you have to save the current select state during the function. Here is a small adaption (see commented lines)

<script language="javascript" type="text/javascript">
    function createNewSelectTag()
    {
        /*check if 2nd select tag is already exist. if it is, cannot make another 2nd select tag*/
        if (document.getElementById('createdSelectTag'))
            {
            if (document.getElementById('SelectTag1').selectedIndex == 0)
                {
                    var element = document.getElementById('createdSelectTag');
                    element.parentNode.removeChild(element);
                }
            }
            else
            {
                // save selected state
                var holdState = document.getElementById('SelectTag1').selectedIndex;
                if (holdState > 0)
                {
                           var newSelectTag = '<li id="createdSelectTag"><span>2nd Select Tag   :</span>' +
                                                '<select id="SelectTag2">' +
                                                     '<option value="a">A</option>' +
                                                     '<option value="b">B</option>' +
                                                     '<option value="c">C</option>' +
                                                 '</select>' +
                                             '</li>';
                           document.getElementById('MAIN').innerHTML += newSelectTag;
                           // set to saved state
                           document.getElementById('SelectTag1').selectedIndex = holdState;
                }
            }
    }
</script>

Answer 2

You use innerHTML += ... to create the new element. Now this will take the original HTML (that doesn't have the selected attribute) and overwrite the current state of the DOM with that. Therefore, the top select element will be "restored" to its original value.

Solution: don't use innerHTML += ..., but use appendChild, in a similar manner to how you used removeChild in the other branch of the script.