Pre Populated text box(es) based on customer selection in dropdown list v2 - xmpie-users/uStore-js GitHub Wiki

This version is capable to work with multiple "dropdown list depending" in order to filter the results.

Animation of the result

Javascript for the HTML Generic window:

<script type = "text/javascript" >
    $(document).ready(function() {

		//Definition of the parent drop down list id
        var ddParentDial = $('#Dial_10287');
		
		//First value is the dropdown list id and the second value is the id of the visible text box
		var ChildDD = [
			['ctl00_cphMainContent_ucDialCustomization_Duc10288_DropDownList','ctl00_cphMainContent_ucDialCustomization_Duc10290_StringTextBox'],
			['ctl00_cphMainContent_ucDialCustomization_Duc10291_DropDownList','ctl00_cphMainContent_ucDialCustomization_Duc10289_StringTextBox'],
			['ctl00_cphMainContent_ucDialCustomization_Duc10302_DropDownList','ctl00_cphMainContent_ucDialCustomization_Duc10303_StringTextBox']
		];

		//Parent Dropdownlist where the customer selects a value		
		ddParentDial[0].addEventListener('change', function(event) {

			var ddParentDialValue = $("#ddlOptions", ddParentDial)
			if (ddParentDialValue[0] !== event.target) return;

			//Go through all Child dropdown lists and modify the values
			for (var i = 0; i < ChildDD.length; i++) {
			
				//Child dropdown list that is made hidden
				const dd = document.getElementById (ChildDD[i][0]);
				const ddvalue = document.getElementById (ChildDD[i][1]);

				//Letting the Childbox select the same value as the Parent dropdown list
				dd.value = ddParentDialValue.val();
				
				//setting the visible text box to use the value of the hidden dropdown list
				ddvalue.value = dd.options[dd.selectedIndex].text;

			}	

        }, false);
    });

</script>
⚠️ **GitHub.com Fallback** ⚠️