3

我是 HTML 新手。我正在尝试从第一个选择标签中检索一个值，如果该值符合预期，第二个选择标签将出现在第一个选择标签下方。这是我一直在尝试的：

<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>

现在，单击第一个选择标签中的“否”将删除第二个选择标签，单击其他选项将创建第二个选择标签，正如我所预期的那样。

但是，第一次更改第一个选择标签并不会立即更改第一个选择标签的值，即使下面已经生成了第二个选择标签。例如，第一次加载页面时，第一个选择标签的值默认为“no”。如果我将其更改为“是”或“可能”，则会创建第二个选择标签，但第一个选择标签的值仍然是“否”。我需要加倍更改它以更改第一个选择标签的值。我做错了什么？

4

2 回答 2

2

您必须在函数期间保存当前的选择状态。这是一个小的改编（见注释行）

<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>
于 2013-07-28T08:57:40.570 回答
1

您用于innerHTML += ...创建新元素。现在这将采用原始 HTML（没有selected属性）并用它覆盖 DOM 的当前状态。因此，顶部select元素将“恢复”到其原始值。

解决方案：不要使用innerHTML += ..., 而是使用, 与您在脚本的其他分支中appendChild使用的方式类似。removeChild

于 2013-07-28T08:57:38.107 回答