使用javascript在另一个选择元素中选择它后如何从选择元素中删除一个选项[重复]

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="" />

我正在尝试在 onfocus 事件中调用 removeSelected(this)。

Answer 1

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/