다중 Select(3개)를 이용하여 조건변화에 따라 값을 출력하는 스크립트가 필요해 만들었다.
- selector1 :  oprtion 1000, 2000, 3000 중 1개 선택.
- selector2 :  selector3 제어, selector3 oprtion 모두표시, 3000제거
- selector3 :  selector2의 제어를 받아 option 3000 표시 비표시
- option display=none 처리.

jquery

$(document).ready(function(){
  total_selector();
			
  $('#selector1').change(function(){
    $('#selector1_val').val( $('#selector1').val() );	
    total_selector();
  });
				
  $('#selector2').change(function(){
	$('#selector2_val').val( $('#selector2').val() );
						
    let selector2_val = $('#selector2_val').val();
    if( selector2_val == 'B'){
      $('#selector3').find('[value=3000]').hide();	
      $('#selector3 option:eq(0)').prop('selected',true);	
      $('#selector3_val').val( $('#selector3 option:eq(0)').val() );
    }else{
      $('#selector3').find('[value=3000]').show();	
    }
    total_selector();
  });
			
  $('#selector3').change(function(){
    $('#selector3_val').val( $('#selector3').val() );
    total_selector();	
  });
});
		
function total_selector(){
  let selector1_val = $('#selector1_val').val();
  let selector2_val = $('#selector2_val').val();
  let selector3_val = $('#selector3_val').val();

  let total_val = Number(selector1_val)+Number(selector3_val);
  $('#total_val').html( total_val.toLocaleString()+" 원");
}

javascript

const inpt1_val = document.getElementById("selector1_val");
			const inpt2_val = document.getElementById("selector2_val");
			const inpt3_val = document.getElementById("selector3_val");

			const select1 = document.getElementById("selector1");
			const select2 = document.getElementById("selector2");
			const select3 = document.getElementById("selector3");

			window.onload = () => {
				let newData1 = [
					{ name:"옵션", price:"1000" },
					{ name:"옵션", price:"2000" },
					{ name:"옵션", price:"3000" }
				];

				let newData1_ls = "";
				newData1.forEach( (x, index) => {
					index++;
					newData1_ls += "<option value='"+x['price']+"'>"+x['name']+index+"</option>";
				});
				select1.innerHTML = newData1_ls; 

				let newData3 = [
					{ name:"옵션", price:"1000"},
					{ name:"옵션", price:"2000"},
					{ name:"옵션", price:"3000"}
				];

				let newData3_ls = "";
					newData3.forEach( (x, index)=>{
						index++;
						newData3_ls += "<option value='"+x['price']+"'>"+x['name']+index+"</option>";
					});
					select3.innerHTML = newData3_ls;
					let opt3 = newData3[2]['price'];
					total();
        }    

        select1.addEventListener("change", (e) => {
					inpt1_val.value = e.target.value;
					total();
        });

        select2.addEventListener("change", (e) =>{
					inpt2_val.value = e.target.value;
					const inpt3_val3 = document.querySelectorAll("#selector3 option")[2];
					if( e.target.value === "B"){
						inpt3_val3.style.display = "none";
						document.querySelectorAll("#selector3 option")[0].selected = true;
						inpt3_val.value = document.querySelectorAll("#selector3 option")[0].value;
						//console.log("inpt3_val3", inpt3_val3);
					}else{
						if( inpt3_val3.style.display = "none"){
							inpt3_val3.style.display = "block";
						}
					}
					total();
        });

        select3.addEventListener("change",(e) => {
					inpt3_val.value = e.target.value;
					total();
        });

        const total = () => {
					const val1 = inpt1_val.value;
					const val3 = inpt3_val.value;
					let total = Number(val1) + Number(val3); 
					document.getElementById("total_val").innerText = total;
        }

다운로드 : https://relation-co-kr.tistory.com/17