如何删除克隆 <select> 上的选定选项并在选择新选项时恢复先前选择的选项答案

【问题标题】：How to remove the selected option on cloned <select> and restore the previous selected option when new option is selected如何删除克隆 <select> 上的选定选项并在选择新选项时恢复先前选择的选项
【发布时间】：2017-10-04 05:48:21
【问题描述】：

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

在这里，我有三个显示业务类别的下拉列表，并且所有三个下拉列表都具有相同的值。我想根据在其他下拉列表中选择的选项隐藏和显示下拉列表中的选项。例如，如果我在下拉菜单 1 上选择 Arts、crafts 和收藏品，则它必须在下拉菜单 2 和下拉菜单 3 上隐藏，并且当我选择Baby 在下拉菜单 1 上，然后 艺术、手工艺品和收藏品 必须显示，Baby 必须在下拉菜单 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>

【问题讨论】：

标签： javascript jquery html

【解决方案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>

【讨论】：

@KiranShahi 请更具体一些，你的意思是什么？
我的意思是我们可以根据选项值而不是选项文本来隐藏和显示选项吗？
@KiranShahi 检查演示 2

【解决方案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() {
    var cat1Value = $(this).val();
    $('.cat2').show();
    if (cat1Value == $("#category2").val()) {
      $("#category2").val($("#category2 option:first").val());
    }
    if (cat1Value == $("#category3").val()) {
      $("#category3").val($("#category3 option:first").val());
    }
    $("#category2 option").show();
    $("#category3 option").show();
    $("#category2 option[value=" + cat1Value + "]").hide();
    $("#category3 option[value=" + cat1Value + "]").hide();
  });

  $("#category2").change(function() {
    $('.cat3').show();
    // var cat1Value = $(this).val();
    // $("#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>

【讨论】：