如果按钮选择了两个选项，则 jQuery 显示/隐藏选项

Question

默认选择自动类别 - 没关系。

但我希望品牌和系列应该是未选择 - 默认情况下。

当我将类别从 AUTO 更改为 MOTO 时，仍然不应该选择 make 和空 Not selected - 值的系列。如果我选择 make，serie 应该是空的 Not selected - 值。

我把我的代码放在这里，我现在有：

var $clonedOpts = $("#make_select").children().clone();

$(".tab a").click(function() { 
  var $layOpts = $clonedOpts.clone().filter('[value^=' + $(this).data("val") + ']');
  $("#make_select").html($layOpts);
});
$(".tab a").eq(0).click();



	$(document).ready(function() {
		var optarray = $("#serie_select").children('option').map(function() {
			var selected = '';
			if($(this).attr('selected')){
				selected = "selected='"+ $(this).attr('selected')+"'";
			}
			return {
				"value": this.value,
				"option": "<option value='" + this.value + "' "+selected+" >" + this.text + "</option>"
			}
		})

		$("#make_select").change(function() {
			$("#serie_select").children('option').remove();
			var addoptarr = [];
			for (i = 0; i < optarray.length; i++) {
				if (optarray[i].value.indexOf($(this).val()) > -1) {
					addoptarr.push(optarray[i].option);
				}
			}
			$("#serie_select").html(addoptarr.join(''))
		}).change();
	})

 a:hover {
  cursor:pointer;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
  Choose category:<br>
  <a data-val="auto">AUTO</a> / <a data-val="moto">MOTO</a>
</div>
<br>

Make:
<select id="make_select">
  <option value="">Not selected</option>
  <option value="auto_audi">AUDI</option>
  <option value="auto_bmw">BMW</option>
  
  <option value="moto_kawasaki">Kawasaki</option>
  <option value="moto_harley-davidson">Harley Davidson</option>
</select>


Serie:
<select id="serie_select">
  <option value="">Not selected</option>
  <option value="auto_audi_a6">A6</option>
  <option value="auto_audi_a8">A8</option>
  <option value="auto_bmw_x3">X3</option>
  <option value="auto_bmw_x5">X6</option>

  <option value="moto_kawasaki_ninja">Ninja</option>
  <option value="moto_kawasaki_z900">Z900</option>
  <option value="moto_harley-davidson_street-750">Street 750</option>
  <option value="moto_harley-davidson_sportster-1200">Sportster 1200</option>
</select>

Answer 1

我的解决方案。您可以轻松添加数据！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
  Choose category:<br>
  <a class="clickChoice" data-val="auto">AUTO</a> / <a class="clickChoice" data-val="moto">MOTO</a>
</div>
<br>

Make:
<select id="make_select">
  <option value="">Not selected</option>
</select>


Serie:
<select id="serie_select">
  <option>Not selected</option>
</select>


<script>
	var main_category = ["auto", "moto"];
	var makeArr = [];
	makeArr['auto'] = ["audi", "bmw"];
	makeArr['moto'] = ["kawwa", "honda"];
	
	var serieArr  = [];
	serieArr['audi'] = ["X1", "X2"];
	serieArr['bmw'] = ["N1", "N2"];
	
	serieArr['kawwa'] = ["Ninja1000", "NinjaH2"];
	serieArr['honda'] = ["CBR1000", "CBR250"];
	
	
	
	
	$(document).ready(function() {
		$(".clickChoice").click(function(k){
			var category = $(this).data("val");
			var makeList = makeArr[category]; 
			
			$('#make_select')
				.find('option')
				.remove()
				.end()
				.append("<option>Select value</option>")
				;
			makeList.forEach(function(x) {
				$('#make_select').append("<option value="+x+">"+x.toUpperCase()+"</option>");
			});
			
		});
		
		$('#make_select').on('change', function() {
			var makeValue = this.value;
			var serieList = serieArr[makeValue];
			console.log(makeValue);
			$('#serie_select')
				.find('option')
				.remove()
				.end()
				.append("<option>Select value</option>")				
				;
			serieList.forEach(function(x) {
				$('#serie_select').append("<option value="+x+">"+x.toUpperCase()+"</option>");
			});
		});
		
		
	})
	
</script>