如何從select元素中刪除一個選項，然後在javascript中選擇另一個select元素

Question

在此先感謝您的幫助！ 我有五個選擇元素在同一個窗體上，並具有相同的選項。我希望在用戶點擊它們時從其他四個選擇元素中刪除任何選定的選項。我希望爲此使用一個簡單的JS。任何建議都會很棒。謝謝！

這是我迄今

JS嘗試：

<script> 
    function removeSelected(obj){ 
    var sel1= document.getElementsByName('program1'); 
    var sel2= document.getElementsByName('program2'); 
    var sel3= document.getElementsByName('program3'); 
    var sel4= document.getElementsByName('program4'); 
    var sel5= document.getElementsByName('program5'); 

    obj.remove(sel1.selectedIndex); 
    obj.remove(sel2.selectedIndex); 
    obj.remove(sel3.selectedIndex); 
    obj.remove(sel4.selectedIndex); 
    obj.remove(sel5.selectedIndex); 
} 
</script> 

其中， 「程序1，程序2，等等。」是每一個選擇元素的名稱

HTML：

<label for= "cName" class= "floatLabel">Please Select A Program<span>*</span></label> 
        <select name="program1" class="floatCtrl" id="cName" required="required" onchange="document.getElementById('program1_text').value=this.options[this.selectedIndex].text" onfocus=" removeSelected(this)"> 
        <option value="" selected> </option> 
        <option value="1"> Break Dancing 7/2/2013 $40.00</option> 
        <option value="2"> Guitar 7/10/2013 $40.00</option> 
        <option value="3"> Drums 7/12/2013 $40.00</option> 
        <option value="4"> Drawing 6/19/2013 $78.00</option> 
        <option value="5"> Watercolor Painting 6/19/2013 $78.00</option> 
        <option value="6"> Kids Art 8/7/2013 $30.00</option> 
        <option value="7"> Book Making 6/12/2013 $40.00</option> 
        <option value="8"> Writing 6/25/2013 $50.00</option> 
        <option value="9"> Dog Obedience 6/5/2013 $45.00</option> 
        <option value="10"> Skateboarding 7/30/2013 $40.00</option> 
        <option value="11"> Dodgeball 8/7/2013 $5.00</option> 
        <option value="12"> Jumprope 8/6/2013 $25.00</option> 
        <option value="13"> Swimming 6/2/13 $40.00</option> 
        <option value="14"> Games 7/2/2013 $20.00</option> 
        <option value="15"> Tennis 1 6/18/2013 $30.00</option> 
        <option value="16"> Tennis 2 6/25/2103 $30.00</option> 
        <option value="17"> Tennis 3 7/2/2013 $25.00</option> 
        <option value="18"> Tennis 4 7/16/2013 $25.00</option> 
        <option value="19"> Tennis 5 7/23/2013 $35.00</option> 
         <option value="20"> Tumbling 5/23/2013 $25.00</option> 
        <option value="21"> Backyard Discovery 7/20/2013 $5.00</option> 
        <option value="22"> Applegate Discovery 7/27/2013 $10.00</option> 
        <option value="23"> Mountain Adventure 8/3/2013 $10.00 </option>             
        </select> 

        <input type="hidden" name="program1_text" id="program1_text" value="" /> 

我想打電話給removeSelected（本）的onfocus事件。

Answer 1

經過很多很多的搜索和大約15腳本我自己的那也不太工作我發現一個很好的在這裏回答！ [1]：https://stackoverflow.com/a/8655433/2344103

Answer 2

HTML

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

的Javascript

var options = document.getElementsByTagName("option"); 
for(var i = 0; i < options.length; i++){ 
    options[i].onclick = function(){ 
     var value = this.value; 
     console.log(value); 
     for(var x = 0; x < options.length; x++){ 
      if(options[x].value == value){ 
       options[x].parentNode.removeChild(options[x]); 
      } 
     } 
    } 
} 

例http://jsfiddle.net/stJqd/