0

動的選択フォームを作成しています。基本的に、ユーザーは選択からオプションを選択し、選択したオプションに応じてデータオブジェクトに入り、以前の回答に基づいて新しい選択を生成します。車両の選択に関する 3 つの質問に答えると、選択した車両が出力されます。

私が直面している問題は、以前のオプションをその場で変更できることです。以前の選択を変更できるようにしたいのですが、後の選択が削除されます

元。ユーザーが最初に Car、Ford を選択すると、モデルの選択肢が表示されます。ユーザーが戻って Car を Truck に変更した場合。フォードとモデルの選択を削除したいと思います。これは、データを保持し、新しい選択を動的に作成するコードの一部です

    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: 

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

私が考えているのは、選択が親ノード (トップ コンテナー) の lastChild であるかどうかを確認することです。そうでない場合は、変更された選択とその前の選択だけになるまで、その子を削除します。

助言がありますか？ありがとう！

4

1 に答える 1

0

createSelect関数で、 などを使用して新しい要素に ID を割り当てますselEle.id = 'newID';。

関数を呼び出す前にcreateSelect、新しい要素が存在するかどうかを確認し、存在する場合は削除します。

if (document.getElementById('newID'))
    document.getElementById('top-container').removeChild(document.getElementById('newID'));
于 2012-04-10T13:43:13.730 に答える