2

2 番目の select 要素を設定するにはどうすればよいですか? 私は最初のものを行う方法を考え出しました。しかし、どの「Make」が選択されているかに応じて、どうすれば2番目に同じことができますか? 小さな一歩を踏み出しながら、自分自身に語りかけようとしましたが、これは私には高度すぎるかもしれないと考えています.

var cars = '{"USED":[{"name":"Acura","value":"20001","models":[{"name":"CL","value":"20773"},{"name":"ILX","value":"47843"},{"name":"ILX Hybrid","value":"48964"},{"name":"Integra","value":"21266"},{"name":"Legend","value":"21380"},{"name":"MDX","value":"21422"},{"name":"NSX","value":"21685"},{"name":"RDX","value":"21831"},{"name":"RL","value":"21782"},{"name":"RSX","value":"21784"},{"name":"SLX","value":"21879"},{"name":"TL","value":"22237"},{"name":"TSX","value":"22248"},{"name":"Vigor","value":"22362"},{"name":"ZDX","value":"32888"}]},{"name":"Alfa Romeo","value":"20047","models":[{"name":"164","value":"20325"},{"name":"8c Competizione","value":"34963"},{"name":"Spider","value":"22172"}]}';
var carobj = eval ("(" + cars + ")");
var select = document.getElementsByTagName('select')[0];

//print array elements out
for (var i = 0; i < carobj.USED.length; i++) {
    var d = carobj.USED[i];
    select.options.add(new Option(d.name, i))
};
4

1 に答える 1

0

私があなたの質問を正しく読んだ場合、最初の選択でメイクのモデルを2番目の選択に入力したいと考えています。純粋な JS アプローチ (jsfiddle を使用) については、以下を参照してください。可能であれば、jQuery ソリューションを好むので、jQuery を検討することをお勧めします。

http://jsfiddle.net/m5U8r/1/

var carobj;

window.onload = function () {
    var cars = '{"USED":[{"name":"Acura","value":"20001","models":[{"name":"CL","value":"20773"},{"name":"ILX","value":"47843"},{"name":"ILX Hybrid","value":"48964"},{"name":"Integra","value":"21266"},{"name":"Legend","value":"21380"},{"name":"MDX","value":"21422"},{"name":"NSX","value":"21685"},{"name":"RDX","value":"21831"},{"name":"RL","value":"21782"},{"name":"RSX","value":"21784"},{"name":"SLX","value":"21879"},{"name":"TL","value":"22237"},{"name":"TSX","value":"22248"},{"name":"Vigor","value":"22362"},{"name":"ZDX","value":"32888"}]},{"name":"Alfa Romeo","value":"20047","models":[{"name":"164","value":"20325"},{"name":"8c Competizione","value":"34963"},    {"name":"Spider","value":"22172"}]}]}';

    carobj = eval ("(" + cars + ")");
    var makes = document.getElementById('make');

    for (var i = 0; i < carobj.USED.length; i++) {
        var d = carobj.USED[i];
        makes.options.add(new Option(d.name, i));
    }

    makes.onchange = getModels;
    getModels();
}

// add models based on make
function getModels () {
    var makes = document.getElementById('make');
    var make = makes.options[makes.selectedIndex].text;
    for (var i = 0; i < carobj.USED.length; i++) {
        if (carobj.USED[i].name == make) {
            var models = document.getElementById('model');
            models.options.length = 0;
            for (var j= 0; j < carobj.USED[i].models.length; j++) {
                var model = carobj.USED[i].models[j];                
                models.options.add(new Option(model.name, j));
            }
            break;            
        }
    }
}

また、より安全な JSON 解析を検討することをお勧めします。ユーザー入力に対して eval を実行する場合、eval の使用にはセキュリティ上のリスクがあります。JSON.orgとそのjson2.jsを調べることができます。または、jQuery を使用する場合: parseJSON。以下はjQueryのバージョンです：

jQuery.parseJSON(jsonString);

JSON 解析のヒント:安全に JSON 文字列をオブジェクトに変換します。

于 2012-11-11T02:07:16.320 に答える