从两个下拉列表获得价值的问题

时间:2016-10-06 11:54:16

标签: javascript html

我是html / javascript语言的新手。

我试图从两个合并dropdowns中获取价值并展示它。我的问题是,我做错了什么,我无法理解。

注意:作为加分,我想添加更多dropdowns

遵循html:

    <form>
    <select name="courselevel" id="courselevel" style="width:120px">
        <option>Courses level</option>
        <option value="1">level 5</option>
        <option value="2">level 4</option>
        <option value="3">level 3</option>
        <option value="4">level 2</option>
        <option value="5">level 1</option>
    </select>
    <br/>
   <select name="tolevel" id="tolevel" style="width:120px">
        <option>To level</option>
        <option value="1">level 4</option>
        <option value="2">level 3</option>
        <option value="3">level 2</option>
        <option value="4">level 1</option>
    </select>
    <br/>
    <input name="button" type="button" value="Submit" onclick="return validate()" />   
    <input name="reset" type="reset" value="Reset" />
<div id="total"></div>
</form>

关注我的js

var courselevel = document.getElementById('courselevel'),
    tolevel = document.getElementById('tolevel');

    window.onload = function(){
courselevel = document.getElementById('courselevel'),
tolevel = document.getElementById('tolevel');

courselevel.addEventListener('change', function(e) {
    switch (level.selectedIndex) {
        case 0:
            var courselevelList1   = ["Select level"];
            var courselevellist2    = ["Select level2"];
            fillList(courselevel, courselevelList1);
            fillList(tolevel, courselevelList2);
            break;

        case 1:

            var courselevelList   = ["Select level", "5", "4", "3", "2", "1"];
            var courselevelList2    = ["Select level2", "4", "3", "2", "1" ];
            fillList(level, courselevelList1);
            fillList(tolevel, courselevelList2);
            break;

    }
});

};




function fillList(el, items) {
     el.innerHTML = '';
    for (var i = 0; i < items.length; i++) {
        var option = document.createElement('option');
        option.value = items[i];
        option.text = items[i];
        el.add(option);
    }
}


window.validate = function() {
    var courselevelvalue = parseFloat(courselevel.options[courselevel.selectedIndex].value),
        tolevelvalue = parseInt(tolevel.options[tolevel.selectedIndex].value),
        totaltolevelvalue = courselevelvalue + tolevelvalue;

    total.innerHTML = totaltolevelvalue;    
    return totaltolevelvalue;        

1 个答案:

答案 0 :(得分:1)

我无法看到明确的问题,但在我使用您的代码制作的fiddle中,您可以看到问题是total未定义

你有这个:

total.innerHTML = totaltolevelvalue; 

total

没有声明

也许您没有完整地包含您的代码