Question

我需要在“添加标题”时添加新的选项按钮。单击，它应该在现有选项中更新。当我在选择上寻找选项时，它应该在那里，我如何在javascript中实现这一点。有什么想法吗？

新的更新：嗨，现在，当我按下“添加章节”时，我已经更改了我的代码。按钮，然后，它应该添加用户输入的章节头到两个章节的选择，有两个章节的地方，所以，每当我点击“添加章节”时，按钮，然后输入的值应在两个地方[两个地方]更新。但是，当我按下添加章节＆＃39;按钮，在提示框中输入值后，显示错误。我想让这件事发生。任何的想法？请

    <html>
    <head><title></title>
    </head>
    <body>
    <form>
<div id="mainsec1" style="border: 1pt solid; width: 40%;padding: 10pt">
<div id="sec1">
<span class="head1">Chapter</span>&#x00A0;&#x2009;<select name="startype" id="starselect">
<option selected="selected"> </option>
<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>&#x00A0;<select name="startypeHead" id="starheading">
<option selected="selected"> </option>
<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>&#x00A0;<select name="startypechap" id="starselectchap">
<option selected="selected"> </option>
<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 LANGUAGE="JavaScript">
    var glovar;
    document.getElementById('starselect').onchange = function(){
    var list = document.forms[0].startype;
    glovar = list.selectedIndex;
    //alert(list.selectedIndex);
    var sublist = document.forms[0].startypeHead;
    sublist.selectedIndex = glovar;
    }
    function AddHead(){
    var inpVal=prompt("Input your Heading", "Heading");
    var opele =document.createElement("option");
    opele.setAttribute("value",inpVal);
    var texEle = document.createTextNode(inpVal);
    opele.appendChild(texEle);
    //document.body.appendChild(opele);
    }

function AddChap(){
  var inpVal=prompt("Input your Chapter", "Chapter");
  var select = document.getElementById("starselectchap"); 
  var select1 = document.getElementById("starselect");
  var opele =document.createElement("option");
  opele.value = inpVal;
  opele.text = inpVal;
  select.add(opele);
//  alert(select1.add(opele));
}
    </SCRIPT>
    </body>
    </html>

Answer 1

将您的AddHead()功能更改为此

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);
}

检查工作jsBin

单击“添加标题”时需要添加新选项按钮，并且应在现有选项中更新

1 个答案: