如何从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/