如何实现三个选择框并使用JavaScript处理选择？_Javascript_Php

如何实现三个选择框并使用JavaScript处理选择？

javascript php

如何实现三个选择框并使用JavaScript处理选择？,javascript,php,Javascript,Php,我需要在一个页面上实现3个选择框，其中一个框中选择的值不应出现在下一个选择框中。我可以用代码对此进行详细解释吗？JS的新手。让我知道这是否也可以用PHP完成。提前谢谢。下面是示例代码。。让我知道为什么不使用JS脚本： <html> <head> <title>check</title> <body> <select name="name[]" class="select"> <option

我需要在一个页面上实现3个选择框，其中一个框中选择的值不应出现在下一个选择框中。我可以用代码对此进行详细解释吗？JS的新手。让我知道这是否也可以用PHP完成。提前谢谢。下面是示例代码。。让我知道为什么不使用JS脚本：

    <html>
    <head>
<title>check</title>
<body>


<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<script>
$('select').change(function() {
    var myOpt = [];
    $("select").each(function () {
        myOpt.push($(this).val());
    });
    $("select").each(function () {
        $(this).find("option").prop('hidden', false);
        var sel = $(this);
        $.each(myOpt, function(key, value) {
            if((value != "") && (value != sel.val())) {
                sel.find("option").filter('[value="' + value +'"]').prop('hidden', true);
            }
        });
    });
});
</script>

</body>
</head>
</html>


检查
挑选
沃尔沃汽车
萨博
梅赛德斯
奥迪
挑选
沃尔沃汽车
萨博
梅赛德斯
奥迪
挑选
沃尔沃汽车
萨博
梅赛德斯
奥迪
$（'select'）.change（函数（）{
var myOpt=[]；
$（“选择”）。每个（函数（）{
myOpt.push（$（this.val（））；
});
$（“选择”）。每个（函数（）{
$（this.find（“option”）.prop（'hidden'，false）；
var sel=$（本）；
$.each（myOpt、函数（键、值）{
if（（value！=“”）和&（value！=sel.val（））{
sel.find（“option”）.filter（'[value=“'+value+'“]'））.prop（'hidden'，true）；
}
});
});
});

希望这个答案能解决您的疑问：

$('select').change(function() {
  var val = $(this).val();

  $("select").not(this).each(function(index, item) {
      $(item).find("option[value='" + val + "']").remove();
  });
});

或者，您可以通过链接进行实时演示。

为什么不使用多个选择框呢

<select multiple name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>


挑选
沃尔沃汽车
萨博
梅赛德斯
奥迪

u“第一次选择后，下一个选择框的值将根据第一次选择显示？”是的。。下一个选择框不应显示在第一个选择框中选择的值，依此类推。首先，为您的选择框提供一些不同的id。我已尝试提供id。仍然没有成功@Maninderpriet。我是否需要为选项字段提供ID？或者tagI从您提供的相同URL尝试了此操作。但我需要一个循序渐进的指导。谢谢，让我知道我提供的代码哪里出错了。我需要先下载jquery库吗？是的，你需要先在@AnandShankarThanks@maninderpret中包含jquery库。它起作用了……）为帮助世界干杯！！：）我可能会回来寻求与该问题相关的其他TPOIC的更多解决方案。：）我可以。但是我需要放置三个选择框，选择值不显示在下一个和下一个中。嗨。。我需要添加三个选择框，其中包含来自数据库的相同数据。如何使用while循环实现这一点？有代码方面的帮助吗？