Question

在下面的示例代码中，当按下“添加章节”按钮时，应添加章节（提示会询问用户章节标题）。有两个地方需要将新的章节元素插入到DOM中。

但是，当按下“添加章节”按钮时，在将值输入提示框后会显示错误。

有人可以给我一些帮助吗？

<html>
  <body>
    <form>
      <div id="mainsec1" style="border: 1pt solid; width: 40%;padding: 10pt">
        <div id="sec1">
          <span class="head1">Chapter</span>
            
          <select name="startype" id="starselect">
            <option selected="selected" />
            <option value="Aquila">Aquila</option>
            <option value="Centaurus">Centaurus</option>
            <option value="Canis Major">Canis Major</option>
          </select>
          <span class="head1">
            <input type="button" class="buttonit" value="Delete" onclick="Delerow();" />
          </span>
        </div>
        <div id="sec2">
          <span class="head1">Heading</span>

          <select name="startypeHead" id="starheading">
            <option selected="selected" />
            <option value="Aquila">Aquila Heading</option>
            <option value="Centaurus">Centaurus Heading</option>
            <option value="Canis Major">Canis Major Heading</option>
          </select>
          <span class="head1">
            <input type="button" class="buttonit" value="Delete" onclick="Delerowsub();" />
          </span>
        </div>
        <input type="button" class="buttonit" value="Add Heading" onclick="AddHead();" />
      </div>
      <div id="mainsec2" style="margin-top: 10pt;border: 1pt solid; width: 40%;padding: 10pt">
        <div id="sec3">
          <span class="head1">Chapter</span>

          <select name="startypechap" id="starselectchap">
            <option selected="selected" />
            <option value="Aquila">Aquila Chapter</option>
            <option value="Centaurus">Centaurus Chapter</option>
            <option value="Canis Major">Canis Major  Chapter</option>
          </select>
          <span class="head1">
            <input type="button" class="buttonit" value="Delete" onclick="Delerow();" />
          </span>
        </div>
      </div>
      <input type="button" class="buttonitonsub" value="Add Chapter" onclick="AddChap();" />
    </form>
  <script>
    var glovar;
    document.getElementById('starselect').onchange = function(){
      var list = document.forms[0].startype;
      glovar = list.selectedIndex;
      var sublist = document.forms[0].startypeHead;
      sublist.selectedIndex = glovar;
    }
    function AddHead(){
      var inpVal = prompt("Input your Heading", "Heading");
      var select = document.getElementById("starheading"); 
      var opele = document.createElement("option");
      opele.value = inpVal;
      opele.text = inpVal;
      select.add(opele);
    }
    function AddChap(){
      var inpVal=prompt("Input your Chapter", "Chapter");
      var select = document.getElementById("starselectchap"); 
      var select1 = document.getElementById("starselect"); //Here, I am trying to get the required element.
      var opele = document.createElement("option");
      opele.value = inpVal;
      opele.text = inpVal;
      select.add(opele);
      alert(select1.add(opele));
    }
  </script>
  </body>
</html>

这是JS Bin试用。

Answer 1

因为您要将新创建的DOM元素添加到第一个选择中，所以无法将其添加到第二个选择中。您需要创建两个要添加到DOM的元素：

var inpVal=prompt("Input your Chapter", "Chapter");
var select = document.getElementById("starselectchap"); 
var select1 = document.getElementById("starselect"); // Here, I am trying to get the required element.
var opele = document.createElement("option");
opele.value = inpVal;
opele.text = inpVal;
var opele1 = document.createElement("option");
opele1.value = inpVal;
opele1.text = inpVal;
// Or use opele.cloneNode(), depending on your browser support.
select.add(opele);
select1.add(opele1);

这将解决问题。我真的建议您通过JSLint运行JavaScript代码。

按下一次按钮后，多选选项更新

1 个答案: