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>

“program1，program2等”是每个选择元素的名称

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

经过多次搜索和我自己的大约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/

如何在使用javascript在另一个select元素中选择选项元素后从其中删除选项

2 个答案: