$(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()+" 원");
}

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;
    }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;
}