Javascript 如何使用Java脚本删除HTML中选定的下拉值？

我有一个多下拉项， 当我从下拉列表中选择一个项目时，该项目不应显示在另一个下拉列表中

例如

下拉列表

投递物品为“10 20 30”

最初,

第一个下拉列表包含“10、20、30”

第二个下拉列表包含“10、20、30”

第三个下拉列表包含“10、20、30”

当我从第二个下拉列表中选择30时，第一个和第三个下拉列表不应同时显示“30”。

我希望有人能尽快帮忙，提前谢谢 下面是我试过的代码

    <script type="text/javascript">

$(document).ready(function () {

    var hideOptions = function () {             
        var $select =  $('select');
        $select.find('option').show();
        $select.each(function () {
            var $this = $(this);
            var value = $this.val();
            var $options = $this.siblings('select').find('option');
            var $option = $options.filter('[value="' + value + '"]');
            if (value) {
                $option.hide();
                $option.each(function () {
                    if (this.defaultSelected) {
                        $(this).parent('select').val('');
                    }
                });
            }
        });
    }

    hideOptions();

    $('select').on('change', function () {  

        hideOptions();
    });
});
</script>



<table style="width:40%" class="requiredField">
<tbody><tr><th>File header</th><th>Table Column</th></tr>

<tr><td>EMAIL</td><td><select name="EMAIL">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
<option value="Country">Country</option></td></tr>

<tr><td>Salutation</td><td><select name="Salutation">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
</td>
</tr>
</tbody></table>

$（文档）.ready（函数（）{
var hideOptions=函数（）{
变量$select=$（'select'）；
$select.find（'option'）.show（）；
$select.each（函数（）{
var$this=$（this）；
var value=$this.val（）；
var$options=$this.sibbins（'select'）.find（'option'）；
var$option=$options.filter（'[value=“'+value+'“]'）；
如果（值）{
$option.hide（）；
$option.each（函数（）{
如果（此.defaultSelected）{
$（this.parent（'select'）.val（''）；
}
});
}
});
}
隐藏（）；
$（'select'）。在（'change'，函数（）{
隐藏（）；
});
});
文件标题表列
电子邮件
挑选
电子邮件地址
打招呼
名字
姓
性别
单位
国家
打招呼
挑选
电子邮件地址
打招呼
名字
姓
性别
单位

演示：

演示：

试试这个

<script `src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>`

<script type="text/javascript"> $(document).ready(function() {
    $('.team1').live('change', function() {
    var allteam = $('.team1').html();
    var val = $(this).val();
    $('.team1[id!="' + $(this).attr("id") + '"]').each(function() {
        $(this).find('option[value="' + val + '"]').remove();
    }); 
    //alert("allteam " + allteam);
}); 
</script> 
<div class="drop">
Team:1
<select data-placeholder="Select Team 1" class="chzn-select team1 drop" tabindex="6" name="team1[]" id="team_one">
    <option value="">Select</option>
    <option value="Team one">Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three">Team three</option>
</select>
Team:2
<select data-placeholder="Select Team 2" class="chzn-select team1 drop" tabindex="6" name="team1[]"  id="team_two">
    <option value="">Select </option>
    <option value="Team one">Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three" selected>Team three</option>
</select>
Team:3
<select data-placeholder="Select Team 2" class="chzn-select team1" tabindex="6" name="team1[]"  id="team_three">
    <option value="">Select </option>
    <option value="Team one" selected>Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three">Team three</option>
</select>

`
$（文档）.ready（函数（）{
$（'.team1'）.live（'change'，function（）{
var allteam=$（'.team1'）.html（）；
var val=$（this.val（）；
$（'.team1[id！=“'+$（this.attr（“id”）+'”]）。每个（函数（）{
$（this.find（'option[value=“”+val+'''']'））.remove（）；
}); 
//警报（“所有团队”+所有团队）；
}); 
组别:1
挑选
第一队
第二队
第三队
组别：2
挑选
第一队
第二队
第三队
组别：3
挑选
第一队
第二队
第三队

试试这个

<script `src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>`

<script type="text/javascript"> $(document).ready(function() {
    $('.team1').live('change', function() {
    var allteam = $('.team1').html();
    var val = $(this).val();
    $('.team1[id!="' + $(this).attr("id") + '"]').each(function() {
        $(this).find('option[value="' + val + '"]').remove();
    }); 
    //alert("allteam " + allteam);
}); 
</script> 
<div class="drop">
Team:1
<select data-placeholder="Select Team 1" class="chzn-select team1 drop" tabindex="6" name="team1[]" id="team_one">
    <option value="">Select</option>
    <option value="Team one">Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three">Team three</option>
</select>
Team:2
<select data-placeholder="Select Team 2" class="chzn-select team1 drop" tabindex="6" name="team1[]"  id="team_two">
    <option value="">Select </option>
    <option value="Team one">Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three" selected>Team three</option>
</select>
Team:3
<select data-placeholder="Select Team 2" class="chzn-select team1" tabindex="6" name="team1[]"  id="team_three">
    <option value="">Select </option>
    <option value="Team one" selected>Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three">Team three</option>
</select>

`
$（文档）.ready（函数（）{
$（'.team1'）.live（'change'，function（）{
var allteam=$（'.team1'）.html（）；
var val=$（this.val（）；
$（'.team1[id！=“'+$（this.attr（“id”）+'”]）。每个（函数（）{
$（this.find（'option[value=“”+val+'''']'））.remove（）；
}); 
//警报（“所有团队”+所有团队）；
}); 
组别:1
挑选
第一队
第二队
第三队
组别：2
挑选
第一队
第二队
第三队
组别：3
挑选
第一队
第二队
第三队

$（文档）.ready（函数（）{
$（'.team1'）.change（函数（）{
var allteam=$（'.team1'）.val（）；
项目2（所有团队）；
});
功能项2（全部1）{
$name=all1；
$（“.team2选项”）。每个（函数（）{
if（this.value==$name）{
$（this.hide（）；
}
});
}
})；

组别:1
挑选
第一队
第二队
第三队
组别：2
挑选
第一队
第二队
第三队
组别：3
挑选
第一队
第二队
第三队

$（文档）.ready（函数（）{
$（'.team1'）.change（函数（）{
var allteam=$（'.team1'）.val（）；
项目2（所有团队）；
});
功能项2（全部1）{
$name=all1；
$（“.team2选项”）。每个（函数（）{
if（this.value==$name）{
$（this.hide（）；
}
});
}
})；

组别:1
挑选
第一队
第二队
第三队
组别：2
挑选
第一队
第二队
第三队
组别：3
挑选
第一队
第二队
第三队

以下是一种在取消选中已删除（在本例中为隐藏）选项时重新获得这些选项的方法：

$(document).ready(function () {

    var hideOptions = function () {
        var $select =  $('select');
        $select.find('option').show();
        $select.each(function () {
            var $this = $(this);
            var value = $this.val();
            var $options = $this.siblings('select').find('option');
            var $option = $options.filter('[value="' + value + '"]');
            if (value) {
                $option.hide();
                $option.each(function () {
                    if (this.defaultSelected) {
                        $(this).parent('select').val('');
                    }
                });
            }
        });
    }

    hideOptions();

    $('select').on('change', function () {
        hideOptions();
    });
});

更新：

使用“提供HTML标记”，您必须将设置varibale

$options

的行更改为：

var $options = $this.parents('table').find('select').not(this).find('option');

---

以下是一种在取消选择已删除（在本例中为隐藏）选项时重新获得这些选项的方法：

$(document).ready(function () {

    var hideOptions = function () {
        var $select =  $('select');
        $select.find('option').show();
        $select.each(function () {
            var $this = $(this);
            var value = $this.val();
            var $options = $this.siblings('select').find('option');
            var $option = $options.filter('[value="' + value + '"]');
            if (value) {
                $option.hide();
                $option.each(function () {
                    if (this.defaultSelected) {
                        $(this).parent('select').val('');
                    }
                });
            }
        });
    }

    hideOptions();

    $('select').on('change', function () {
        hideOptions();
    });
});

更新：

使用“提供HTML标记”，您必须将设置varibale

$options

的行更改为：

var $options = $this.parents('table').find('select').not(this).find('option');

---

这是我编写的jquery代码，它正好做到了这一点。同时在中保留空值（如果顶部有“请选择”），并重新插入未选择的值。如果需要限制选择器$（“选择”），它会对页面上的所有选择元素执行此操作，并使用更具体的选择器替换选择器$（“选择”）：

$( document ).ready(function() {
  manageSelectValues();
  $("select").change(manageSelectValues); 
});

function manageSelectValues()
{
  $("select").each(function() {
      var id = $(this).attr('id');
    var value = $(this).find(":selected").val();
    if (value) {
      $("select[id!='" + id + "']").find("option").filter(function() { return this.value == value;}).remove();
    }
    $(this).find("option").filter(function() { return this.value != value;}).each(function() {
      var unselValue = $(this).val();
      $("select").filter(function() { return $(this).find("option").filter(function() { return this.value == unselValue;}).length == 0; }).append(
        $('<option></option>').val(unselValue).html(unselValue));
    })
  });
}

$（文档）.ready（函数（）{
manageSelectValues（）；
$（“选择”）.change（manageSelectValues）；
});
函数manageSelectValues（）
{
$（“选择”）。每个（函数（）{
var id=$（this.attr（'id'）；
var value=$（this.find（“：selected”）.val（）；
如果（值）{
$（“选择[id！=”“+id+””]）。查找（“选项”）.filter（函数（）{返回this.value==value；}）。删除（）；
}
$（this.find（“option”）.filter（function（）{return this.value！=value；}）.each（function（）{
var unselValue=$（this.val（）；
$（“选择”）.filter（函数（）{return$（this）.find（“option”）.filter（函数（）{return this.value==unselValue；}）.length==0；}）.append(
$（''）.val（unselValue.html（unselValue））；
})
});
}

这是我制作的一个jquery代码，它正是这样做的。它在中保留空值（如果顶部有“请选择”），并重新插入未选择的值。如果需要限制选择器$（“选择”），它会对页面上的所有选择元素执行此操作。请使用更具体的选择器替换选择器$（“选择”）：

$( document ).ready(function() {
  manageSelectValues();
  $("select").change(manageSelectValues); 
});

function manageSelectValues()
{
  $("select").each(function() {
      var id = $(this).attr('id');
    var value = $(this).find(":selected").val();
    if (value) {
      $("select[id!='" + id + "']").find("option").filter(function() { return this.value == value;}).remove();
    }
    $(this).find("option").filter(function() { return this.value != value;}).each(function() {
      var unselValue = $(this).val();
      $("select").filter(function() { return $(this).find("option").filter(function() { return this.value == unselValue;}).length == 0; }).append(
        $('<option></option>').val(unselValue).html(unselValue));
    })
  });
}

$（文档）.ready（函数（）{
manageSelectValues（）；
$（“选择”）.change（manageSelectValues）；
});
函数manageSelectValues（）
{
$（“选择”）。每个（函数（）{
var id=$（this.attr（'id'）；
var值=$（this）.find（“：selected”