동적 선택시 하위 노드 제거

동적 선택 양식을 만듭니다. 기본적으로 사용자는 선택 항목에서 옵션을 선택하고 선택한 옵션에 따라 데이터 개체로 이동 한 다음 이전 대답을 기반으로 새 선택 항목을 생성합니다. 차량 선택과 관련하여 3 가지 질문에 답한 후 차량 선택을 인쇄합니다.동적 선택시 하위 노드 제거

내가 겪고있는 문제는 이전 옵션을 즉시 변경할 수있는 기능입니다. 이전 선택을 변경할 수있게하고 나중에 선택을 제거하도록합니다.

예. 사용자는 먼저 자동차, 포드를 선택하고 모델에 대한 선택이 표시됩니다. 사용자가 돌아가서 자동차를 트럭으로 바꾼 경우 나는 포드와 모델 선택을 제거하고 싶다. 선택하면

<div id="top-container"> 
    <h1>Awesome<br/> 
    Car<br/> 
    Picker</h1> 


    </div> 
    <div id="middle-container"> 
<h2>Your vechle choice:</h2> 
    </div> 

    <div id="bottom-container"> 
    <div id="mail-form"> 
    <form name='mail-form'> 

    <label>Name</label> 
    <input name="name" autofocus> 

    <label>Email</label> 
    <input name="email"> 

    <label>Credit Card number</label> 
    <input name="cc"> 

    <input id="submit" name="submit" value="Submit" onClick="validate()"> 

    </form> 
    </div> 

    </div> 

    <body>

내가 생각하고있어 확인하는 것입니다 참조 : 여기에 코드의 일부는 내가 그 동적

var data=new Object();// create a new data object to hold info 


data['init']=['Car','Truck','SUV']; 

data['Car']=['Audi','Dodge','Ford','Volkswagon']; 
data['Audi']=['A4','TT','R8']; 
data['Dodge']=['Charger','Challenger','Stealth']; 
data['Ford']=['Focus','Fusion','Mustang']; 
data['Volkswagon']=['Jetta','GTI','Beetle']; 

data['Truck']=['Dodge Truck','Ford Truck','Toyota Truck']; 
data['Dodge Truck'] = ['Ram-1500','Ram-2500','Ram-3500']; 
data['Ford Truck'] = ['F-150','F-250','Ranger']; 
data['Toyota Truck'] = ['Tundra','Tacoma']; 

data['SUV']=['Dodge SUV','Ford SUV','Toyota SUV']; 
data['Dodge SUV'] = ['Durango','Journey','Caliber']; 
data['Ford SUV'] = ['Escape','Edge','Explorer']; 
data['Toyota SUV'] = ['Rav4','Highlander','4runner']; 

var hold = data['init'];//Sets data to 'init' by default 

    var selectedArray = [];//This array holds the selected options (to be used to display the vehicle name) 

    function init(){//call first to create the first select box and populate with 'init'   

    firstSelect = document.createElement('select'); 
    firstSelect.setAttribute("onChange","createSelect(this.value)"); 
    createSelect('init');  
} 




//Main create function for select boxes 
function createSelect(value){ 

    selectHold = value;//sets selectHold to the value of the selected item (this will be used for displaying the name in disName) 

    //This just prevents it from adding "Car, Truck or SUV to the selectedArray 
    if(value != 'init' && value != 'Truck' && value != 'Car' && value != 'SUV' && value != 'Select your vehicle options'){ 
     selectedArray.push(selectHold); 
    } 

    hold=data[value];// sets this holder to the value of the selected item for the if statement 


    if(hold){ //just checks to see if hold exists 

     var selEle = document.createElement('select');//creates new select element 

     //gives selEle onchange function 
     selEle.setAttribute("onChange","createSelect(this.value)"); 

     //Creates the "default" option. Forcing them to pick something. 
     var defaultOpt = document.createElement('option'); 
     var vehInfo = document.createTextNode("Select your vehicle options"); 
     defaultOpt.appendChild(vehInfo); 
     selEle.appendChild(defaultOpt); 

     //Populates the options and adds it to the document 
     for(var i = 0, l = hold.length; i < l; i++){ 
      var newOpt = document.createElement('option'); 
      newOpt.appendChild(document.createTextNode(hold[i])); 
      newOpt.setAttribute('value',hold[i]); 
      selEle.appendChild(newOpt); 
     } 


     //put select on the page 
     document.getElementById('top-container').appendChild(selEle); 
     } 

    else{  //if not, then put out final form 
     disName(selectHold,selectedArray);//call disName function an dpass it the value of selectHold 

     } 

}

HTML 데이터를 보유하고 있으며 새로운 선택을 만들어 가지고있다 부모 노드 (상단 컨테이너)의 lastChild입니다. 그것이 아니라면, 변경된 선택 사항과 그 전에 선택되었던 선택 사항 일 때까지 그 자식을 삭제하십시오.

제안 사항? 감사합니다.

출처

2012-04-10 Lance Laughlin

createSelect 함수에서 selEle.id = 'newID';과 같은 것을 사용하여 새 요소에 ID를 할당하십시오.

createSelect 함수를 호출하기 전에 새로운 요소가 존재하는 경우, 확인 그렇다면, 그것을 제거 :

if (document.getElementById('newID')) 
    document.getElementById('top-container').removeChild(document.getElementById('newID'));

출처

2012-04-10 13:43:13 Travesty3

나는 그 선택 각각의 새로운주지 것 'createSelect'기능의 ID를 할당 한 경우 이드? 그 ID를 가진 모든 선택을 제거하지 않겠습니까? –

아마도'createSelect' 함수의 다른 매개 변수를 만들어서'selModel','selMake','selYear' 등과 같이 사용할 ID를 전달하십시오. – Travesty3

동적 선택시 하위 노드 제거

답변

관련 문제