2014-07-12 53 views
0

我需要添加一個新的選項按鈕,當'添加標題'點擊,它應該得到更新在現有的選項。當我在選擇上尋找選項時,它應該在那裏,我如何在javascript中實現這一點。任何想法?需要添加一個新的選項按鈕,當點擊'添加標題',它應該在現有選項中更新

新更新:嗨,在這裏我改變了我的代碼,現在,當我按下'添加章節'按鈕時,它應該將用戶輸入的章節頭添加到這兩章的選擇中,有兩章章節,所以,每當我點擊'添加章節'按鈕,那麼輸入的值應該在兩個地方[兩個地方]更新。但是,當我按下添加章節'按鈕後,在提示框中輸入值後,它顯示錯誤。我想要做到這一點。任何想法?請

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

回答

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

相關問題