JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<form>
			<div>
			<select id="id1" name="id1" onChange="mark(this.id,'id2')" multiple size="5" style="width: 200px;height: 60px;">
				<!--option value="" class="not">Auswahl</option-->
				<option value="/pfad1">Pfad 1</option>
				<option value="/pfad2">Pfad 2</option>
			</select>
			</div>
			<div style="margin-top:20px;">
			<select id="id2" name="id2" onChange="mark(this.id,'id3')" multiple size="5" style="width: 200px;height: 60px;">
				<!--option value="" class="not">Auswahl</option-->
				<option class="off" value="/pfad1/pfad11">Pfad 1-1</option>
				<option class="off" value="/pfad2/pfad21">Pfad 2-1</option>
			</select>
			</div>
		<div style="margin-top:20px;">
			<select id="id3"  name="id3" onChange="mark(this.id,'')" multiple size="5" style="width: 200px;height: 60px;">
				<!--option value="" class="not">Auswahl</option-->
				<option class="off" value="/pfad1/pfad11/pfad111">Pfad 1-1-1</option>
				<option class="off" value="/pfad1/pfad11/pfad112">Pfad 1-1-2</option>
				<option class="off" value="/pfad2/pfad21/pfad211">Pfad 2-1-1</option>
			</select>
			</div>
		</form>

CSS

OPTION.off {display:none;}

JavaScript

function disableChild(sourceList,targetList)
{
	var listNames;
  if (targetList != "") {
  	listNames = targetList;
  }
	$("select[id="+listNames+"] option").each(function()
	{
		//$(this).attr("disabled", "true");
		/*if ($(this).hasClass("not") == false)
		{*/
			$(this).removeClass("off").addClass("off");
		/*}*/
	});
}


function mark(sourceList,targetList)
{
	disableChild(sourceList,targetList);

	var pathArray = [];
	$("select[id="+sourceList+"] option:selected").each(function() {
		pathArray.push($(this).attr("value"));
	});

	if (targetList != "")
	{
		$("select[id="+targetList+"] option").each(function()
		{
			for (i = 0; i < pathArray.length;i++)
			{
				if ($(this).attr("value").indexOf(pathArray[i]) > -1)
				{
					//$(this).removeAttr("disabled", "true");
					$(this).removeClass("off");
				}
			}
		});
	}
}