3

HTML初心者です。1 番目の選択タグから値を取得しようとしています。値が期待どおりであれば、2 番目の選択タグが 1 番目の選択タグの下に表示されます。これが私が試してきたことです：

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

これで、1 番目の選択タグで「いいえ」をクリックすると 2 番目の選択タグが削除され、他のオプションをクリックすると 2 番目の選択タグが作成されます。

ただし、1 番目の select タグを初めて変更しても、2 番目の select タグが既に下に生成されていても、1 番目の select タグの値はすぐには変更されません。たとえば、ページが最初にロードされたとき、最初の選択タグの値はデフォルトで「no」です。「はい」または「多分」に変更すると、2 番目の選択タグが作成されますが、1 番目の選択タグの値は「いいえ」のままです。最初の選択タグの値を変更するには、二重に変更する必要があります。私は何を間違えましたか？

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 に答える