jQuery показать / скрыть опции, если кнопка выбрала две опции

Question

По умолчанию выбрана категория АВТО - все нормально.

Но я хочу, чтобы make и ser ie были Не выбраны - по умолчанию.

Когда я изменить категорию с AUTO на MOTO все равно не следует выбирать make и ser ie с пустым Not selected - значением. Чем, если я выберу make, ser ie должен быть с пустым Не выбрано - значение.

Я разместил свой код здесь, что у меня сейчас:

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>