选择表单项具有未定义的值答案

【问题标题】：Select form item has undefined value选择表单项具有未定义的值
【发布时间】：2016-03-20 12:20:30
【问题描述】：

我已经阅读了一些关于提升的内容，但我不确定它在这种情况下如何应用。我有一个动态显示和隐藏的选择值，并且此选择元素的值始终未定义。请帮忙！谢谢

HTML

<tr>
    <td>Type:</td>
    <td>
        <select id="type" onchange="rulesShown()">
            <option value="ATC">ATC</option>
            <option value="PILOT">PILOT</option>
        <select>
    </td>
</tr>
<tr id="rules">
    <td>Rules:</td>
    <td>
        <select id="rules">
            <option value="FAA">FAA</option>
            <option value="ICAO">ICAO</option>
        <select>
    </td>
</tr>

Javascript：

<script>
    function rulesShown() {
        if(document.getElementById("type").value=="ATC"){
            document.getElementById("rules").style.display = "";
            document.getElementById("rules").style.removeProperty( 'display' );
        }
        else{
            document.getElementById("rules").style.display = "none";
        }
    }
    function verifyData() {
        var email1 = document.getElementById("email1");
        var email2 = document.getElementById("email2");
        var comments = document.getElementById("comments").value;
        if(comments!=""){
            if(email2==null){
                    //submit form
                    submit();
            }
            else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email1.value)){  
                if(email1.value == email2.value) {
                    //submit form
                    submit();
                }
                else {
                    //emails dont match
                    alert('Email addresses do not match!');
                }
            }
            else{
                //invalid email address
                alert('Please enter a valid email address!');
            }
        }
        else{
            alert('Please enter some comments!');
        }
    }
    function submit(){
        var vid = <?php echo $user['vid'] ?>;
        var email = document.getElementById("email1").value;
        var type = document.getElementById("type").value;
        var rules = document.getElementById("rules").value;
        var comments = document.getElementById("comments").value;
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("page").innerHTML = xhttp.responseText;
            }
        }
        xhttp.open("POST", "/content/training/request/submit.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send("vid="+vid+"&email="+email+"&type="+type+"&rules="+rules+"&comments="+comments);
    }
</script>

不需要 AJAX 调用的文件。它只是发布'规则'。据我所知，这是一个 javascript 提升问题，但我不知道为什么。谢谢

【问题讨论】：

为什么你认为这是一个与提升有关的问题，而不是与.value 不是document.getElementById() 返回的对象的有效属性这一事实无关？

标签： javascript html hoisting

【解决方案1】：

这与纯 JavaScript 概念的提升无关。您有两个具有相同 ID 的元素。一个<tr> 和一个<select>。这是html禁止的。这其中的一个含义是浏览器不保证getElementById()会返回哪个元素

【讨论】：