小羊也疯狂
2017-04-06 09:27
采纳率: 88.4%
浏览 981

关于表单联动联系中遇到的问题

图片说明
• 学校:选北京出现北大清华。 选武汉 出现武大华科
• 问题1:现在我选的武汉。大家看我54行控制台上的信息。 前一个都是对的 为什么后一个就不对了(前一个是武汉 赋值给后一个,后一个变成北京了!)
• 问题2:大家看我44行。如果我用location代替loc 为什么网页404
• 问题3:我这个做法是表单联动的常见做法吗

源码:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task3-3</title>
    <style type="text/css">
        * {
            font-size: 12px;
            padding: 0;
            margin: 0;
        }
        form {width: 400px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid black;}
        form p{margin: 20px auto;width: 200px;}
        form p input{margin-right: 5px;margin-left: 30px;}
        form span{margin:20px 10px 20px 50px;display: inline-block;}

    </style>
</head>
<body>
<form>
    <p><input type="radio"  name="stdornot" value="在校生" id="std">在校生
        <input type="radio" name="stdornot" value="非在校生" id="no_std">非在校生<br></p>
    <div id="ls" style="display: none;" ><span>学校</span>
        <select    style="width: 100px"   id="loc">
            <option >北京</option>
            <option >武汉</option>
        </select >
        <select   style="width: 150px"   id="school">

        </select></div>
    <div id="workplace" style="display: none;"><span>就业单位</span>
        <input  id="firm" type="text" style="width: 200px;height: 20px">

        </input></div>
</form>
<script type="text/javascript">
    var std=document.getElementById("std");
    var no_std=document.getElementById("no_std");
    var ls=document.getElementById("ls");
    var workplace=document.getElementById("workplace");
    var loc = document.getElementById("loc");
    var school = document.getElementById("school");
    std.onclick=function () {
        ls.style.display='block';
        workplace.style.display='none';
    };
    no_std.onclick=function () {
        ls.style.display='none';
        workplace.style.display='block';
    };
    var selectOption = loc.options[loc.selectedIndex];
    if(selectOption.text=="北京"){
        clearSelectbox(school);
        var beida=new Option("北京大学","北京大学");
        school.add(beida,undefined);
        var qinghua=new Option("清华大学","清华大学");
        school.add(qinghua,undefined);
    }
    if(selectOption.text=="武汉"){
        clearSelectbox(school);
        var wuda=new Option("武汉大学","武汉大学");
        school.add(wuda,undefined);
        var huake=new Option("华中科技大学","华中科技大学");
        school.add(huake,undefined);
    }
function clearSelectbox(selectbox) {
    for(var i=0,len=selectbox.options.length;i<len;i++){
        selectbox.remove(0);
    }
}
</script>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 已采纳

    问题1
    你变量存储的就初始化时的option,并不是选中后的,loc.options[loc.selectedIndex]这样是重新获取最新的选中option了

    问题2:大家看我44行。如果我用location代替loc 为什么网页404
    location是window的导航对象,不能定义这个对象,你赋值了要转向到你赋值的那个地址了,由于是dom对象,会调用默认的toString方法得到字符串([object HTMLSelectElement]),然后转向到那个url地址肯定报错了

    • 问题3
    你并没有联动起来,应该给loc添加onchange来更改另外一个select的option,联动可以参考这种,包括数据结构:javascript省市县三级联动示例

    
        var std=document.getElementById("std");
        var no_std=document.getElementById("no_std");
        var ls=document.getElementById("ls");
        var workplace=document.getElementById("workplace");
        var loc = document.getElementById("loc");
        var school = document.getElementById("school");
        std.onclick=function () {
            ls.style.display='block';
            workplace.style.display='none';
        };
        no_std.onclick=function () {
            ls.style.display='none';
            workplace.style.display='block';
        };
        loc.onchange=loadSchool
        function loadSchool() {
            var selectOption = loc.options[loc.selectedIndex];
            if (selectOption.text == "北京") {
                clearSelectbox(school);
                var beida = new Option("北京大学", "北京大学");
                school.add(beida, undefined);
                var qinghua = new Option("清华大学", "清华大学");
                school.add(qinghua, undefined);
            }
            if (selectOption.text == "武汉") {
                clearSelectbox(school);
                var wuda = new Option("武汉大学", "武汉大学");
                school.add(wuda, undefined);
                var huake = new Option("华中科技大学", "华中科技大学");
                school.add(huake, undefined);
            }
        }
        loadSchool()
    function clearSelectbox(selectbox) {
        for(var i=0,len=selectbox.options.length;i<len;i++){
            selectbox.remove(0);
        }
    }
    
    点赞 打赏 评论
  • 75闪光雷 2017-04-06 09:33

    我觉得你更换地区时,
    应该把school清空,
    再重新加载学校。

    点赞 打赏 评论
  • 转角人生 2017-04-07 06:42
    点赞 打赏 评论

相关推荐