javascript - 如何删除克隆 <select> 上选定的选项并在选择新选项时恢复以前选定的选项

Question

如何克隆<select>另外两个<select>并隐藏在其他 <select> 上选择的选项并在选择新选项时显示隐藏选项。我还希望它能够跨浏览器兼容。

在这里，我有三个下拉菜单，显示业务类别，并且所有三个下拉菜单都具有相同的值。我想根据其他下拉菜单中选择的选项隐藏和显示下拉菜单中的选项。例如，如果我在下拉菜单 1 上选择艺术、工艺品和收藏品，则它必须在下拉菜单 2 和下拉菜单 3 上隐藏，并且当我选择时婴儿位于下拉菜单 1 上，然后艺术、工艺品和收藏品必须显示，而婴儿必须隐藏在下拉菜单 2 和下拉菜单 3

categories = [
	{catValue:1, catName: 'Arts, crafts, and collectibles'},
	{catValue:2, catName: 'Baby'},
	{catValue:3, catName: 'Beauty and fragrances'},
	{catValue:4, catName: 'Books and magazines'},
	{catValue:5, catName: 'Business to business'},
	{catValue:6, catName: 'Clothing, accessories, and shoes'},
	{catValue:7, catName: 'Antiques'},
	{catValue:8, catName: 'Art and craft supplies'},
	{catValue:9, catName: 'Art dealers and galleries'},
	{catValue:10, catName: 'Camera and photographic supplies'},
	{catValue:11, catName: 'Digital art'},
	{catValue:12, catName: 'Memorabilia'}
];

var categoriesJson = JSON.stringify(categories);

$( document ).ready(function() {
	$('.cat2').hide();
	$('.cat3').hide();

	$.each(JSON.parse(categoriesJson), function (key, value) {
	 	$("#category1").append($("<option></option>").val(value.catValue).html(value.catName));
	 });

	$("#category2").html( $("#category1").html());
	$("#category3").html( $("#category1").html());

	$("#category1").change(function () {
		var cat1Value = $(this).val();
		$('.cat2').show();
		$("#category2 option[value=" + cat1Value + "]").hide();
		$("#category3 option[value=" + cat1Value + "]").hide();
    });

    $("#category2").change(function () {
		var cat1Value = $(this).val();
		$('.cat3').show();
		$("#category1 option[value=" + cat1Value + "]").hide();
		$("#category3 option[value=" + cat1Value + "]").hide();
    });

    $("#category3").change(function () {
		var cat1Value = $(this).val();
		$("#category2 option[value=" + cat1Value + "]").hide();
		$("#category1 option[value=" + cat1Value + "]").hide();
    });

});

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

<div class="cat1">
    <label>Category 1</label>
    <select id="category1" name="businessCategory">
        <option>Select category</option>
    </select>
</div>
    
<div class="cat2">
    <label>Category 2</label>
    <select id="category2">
    </select>
</div>

<div class="cat3">
    <label>Category 3</label>
    <select id="category3">
    </select>
</div>

Answer 1

这是您要找的吗？

function hide() {
  selected = $("select[id^=category]").map(function() {
    if ($(this).find(":selected").val() != "Select category") {
      return $(this).find(":selected").text()
    }
  })
  $("select[id^=category]").each(function() {
    $(this).find("option").show();
    $(this).find('option').filter(function() {
      return $.inArray($.trim($(this).text()), selected) > -1;
    }).hide();
  })
}

我还稍微缩短了您的代码，使其更加干净。

演示

categories = [{
    catValue: 1,
    catName: 'Arts, crafts, and collectibles'
  },
  {
    catValue: 2,
    catName: 'Baby'
  },
  {
    catValue: 3,
    catName: 'Beauty and fragrances'
  },
  {
    catValue: 4,
    catName: 'Books and magazines'
  },
  {
    catValue: 5,
    catName: 'Business to business'
  },
  {
    catValue: 6,
    catName: 'Clothing, accessories, and shoes'
  },
  {
    catValue: 7,
    catName: 'Antiques'
  },
  {
    catValue: 8,
    catName: 'Art and craft supplies'
  },
  {
    catValue: 9,
    catName: 'Art dealers and galleries'
  },
  {
    catValue: 10,
    catName: 'Camera and photographic supplies'
  },
  {
    catValue: 11,
    catName: 'Digital art'
  },
  {
    catValue: 12,
    catName: 'Memorabilia'
  }
];

var categoriesJson = JSON.stringify(categories);

$(document).ready(function() {
  $('.cat2').hide();
  $('.cat3').hide();

  $.each(JSON.parse(categoriesJson), function(key, value) {
    $("#category1").append($("<option></option>").val(value.catValue).html(value.catName));
  });

  $("#category2").html($("#category1").html());
  $("#category3").html($("#category1").html());

  $("#category1").change(function() {
    $('.cat2').show();
    hide()
  });

  $("#category2").change(function() {
    $('.cat3').show();
    hide()
  });

  $("#category3").change(function() {
    hide()
  });

  var selected = [];

  function hide() {
    selected = $("select[id^=category]").map(function() {
      if ($(this).find(":selected").val() != "Select category") {
        return $(this).find(":selected").text()
      }
    })
    $("select[id^=category]").each(function() {
      $(this).find("option").show();
      $(this).find('option').filter(function() {
        return $.inArray($.trim($(this).text()), selected) > -1;
      }).hide();
    })
  }

});

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

<div class="cat1">
  <label>Category 1</label>
  <select id="category1" name="businessCategory">
        <option>Select category</option>
    </select>
</div>

<div class="cat2">
  <label>Category 2</label>
  <select id="category2">
    </select>
</div>

<div class="cat3">
  <label>Category 3</label>
  <select id="category3">
    </select>
</div>

演示2

categories = [{
    catValue: 1,
    catName: 'Arts, crafts, and collectibles'
  },
  {
    catValue: 2,
    catName: 'Baby'
  },
  {
    catValue: 3,
    catName: 'Beauty and fragrances'
  },
  {
    catValue: 4,
    catName: 'Books and magazines'
  },
  {
    catValue: 5,
    catName: 'Business to business'
  },
  {
    catValue: 6,
    catName: 'Clothing, accessories, and shoes'
  },
  {
    catValue: 7,
    catName: 'Antiques'
  },
  {
    catValue: 8,
    catName: 'Art and craft supplies'
  },
  {
    catValue: 9,
    catName: 'Art dealers and galleries'
  },
  {
    catValue: 10,
    catName: 'Camera and photographic supplies'
  },
  {
    catValue: 11,
    catName: 'Digital art'
  },
  {
    catValue: 12,
    catName: 'Memorabilia'
  }
];

var categoriesJson = JSON.stringify(categories);

$(document).ready(function() {
  $('.cat2').hide();
  $('.cat3').hide();

  $.each(JSON.parse(categoriesJson), function(key, value) {
    $("#category1").append($("<option></option>").val(value.catValue).html(value.catName));
  });

  $("#category2").html($("#category1").html());
  $("#category3").html($("#category1").html());

  $("#category1").change(function() {
    $('.cat2').show();
    hide()
  });

  $("#category2").change(function() {
    $('.cat3').show();
    hide()
  });

  $("#category3").change(function() {
    hide()
  });

  var selected = [];

  function hide() {
    selected = $("select[id^=category]").map(function() {
      if ($(this).find(":selected").val() != "Select category") {
        return $(this).find(":selected").val()
      }
    })
    $("select[id^=category]").each(function() {
      $(this).find("option").show();
      $(this).find('option').filter(function() {
        return $.inArray($.trim($(this).val()), selected) > -1;
      }).hide();
    })
  }

});

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

<div class="cat1">
  <label>Category 1</label>
  <select id="category1" name="businessCategory">
        <option>Select category</option>
    </select>
</div>

<div class="cat2">
  <label>Category 2</label>
  <select id="category2">
    </select>
</div>

<div class="cat3">
  <label>Category 3</label>
  <select id="category3">
    </select>
</div>