jQuery函数不适用于选择表单

Question

我正在使用以下选择形式和功能来首先选择运输类型，根据我在第一阶段的选择，我希望有第二种形式的汽车或摩托车清单。 如果您能让我知道为什么我的功能无法正常工作以及缺少什么，我将不胜感激

<!doctype html>
<html>
<body>
<select id="transport" name="transport">
<option value="choose">Please choose a type</option>
<option value="cars">Cars</option>
<option value="motorcycles">Motorcycles</option>
</select>
<select id="model" name="model">
<option>Please choose a type first</option>
</select>

<input id="submit" type="submit" value="submit" />
</body>

<script>
(function(){
    var type = document.getElementById('transport');
    var model = document.getElementById('model');
    var cars = {
        Alfa_Romeo: '4 C Spider',
        Aston_Martin: 'V12 Vantage',
        Audi: 'A4 Allroad',
        Ford: 'Focus'
    };
    var motorcycles = {
        Yamaha: 'YZF-R6',
        Kawasaki: 'Versys 650 LT',
        Suzuki: 'Boulevard C50',
        Honda: 'Super Cub C100'
    };

    addEvent(type, 'change', function() {
        if (this.value  === 'choose'){
            model.innerHTML = '<option>Please choose a type first</option>';
            return;                                                                   
         }
        var models = getModels(this.value);

        var options = '<option>Please choose a model</option>';
        for (var key in models){
            options += '<option value="' + key + '">' + models[key] + '</option>'; 
        }                                                                             
        model.innerHTML = options;
    });

    function getModels(transport) {
        if (transport === 'cars') {
            return cars;
        } else if (transport === 'motorcycles'){
            return motorcycles;                                                                                      
        }                                                                    
    }       
}());
</script>

`

Answer 1

使用addEventListener 。 检查此工作片段

 (function(){ var type = document.getElementById('transport'); var model = document.getElementById('model'); var cars = { Alfa_Romeo: '4 C Spider', Aston_Martin: 'V12 Vantage', Audi: 'A4 Allroad', Ford: 'Focus' }; var motorcycles = { Yamaha: 'YZF-R6', Kawasaki: 'Versys 650 LT', Suzuki: 'Boulevard C50', Honda: 'Super Cub C100' }; type.addEventListener('change', function() { if (this.value === 'choose'){ model.innerHTML = '<option>Please choose a type first</option>'; return; } var models = getModels(this.value); var options = '<option>Please choose a model</option>'; for (var key in models){ options += '<option value="' + key + '">' + models[key] + '</option>'; } model.innerHTML = options; }); function getModels(transport) { if (transport === 'cars') { return cars; } else if (transport === 'motorcycles'){ return motorcycles; } } }());

 <select id="transport" name="transport"> <option value="choose">Please choose a type</option> <option value="cars">Cars</option> <option value="motorcycles">Motorcycles</option> </select> <select id="model" name="model"> <option>Please choose a type first</option> </select> <input id="submit" type="submit" value="submit" />

jQuery函数不适用于选择表单

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-12-27 03:19:44

jQuery函数不适用于选择表单

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-12-27 03:19:44

解决方案1
1 已采纳 2016-12-27 03:19:44