JS选择更改答案

【问题标题】：JS select on changeJS选择更改
【发布时间】：2014-01-09 07:21:17
【问题描述】：

我有一个用于选择的 onchange 函数。

$(document).ready(function() {
    $('#thechoices').on('change', do_the_change_studfac);
});

function do_the_change_studfac() {
    var the_position = $('#thechoices').val();
    var studentcourse = document.getElementById("studcourse");
    var atudentlevel = document.getElementById("studlevel");
    //var sub = $('#submithere');

    if (the_position == 'stud'){

        //alert('true');
        studentcourse.show();
        studentlevel.show();
        studentcourse.attr("required","required");
        studentlevel.attr("required","required");

    }
    if (the_position == 'fac'){

        //alert('false');
        studentcourse.hide();
        studentlevel.hide();
        studentcourse.removeAttr("required");
        studentlevel.removeAttr("required");


    }
}

这些是我的 html 输入字段：

<label>Select Position</label>
<select id="thechoices" name="position">        
    <option value="stud">Student</option>
    <option value="fac">Faculty Member</option>
</select>

<label for="name">Name </label>
<input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
<label>ID Number</label>
<input type="text" name="id_num" size="8" maxlength="8" pattern="\d" placeholder="8-digits only"required />
<label>Course</label>
<input type="text" name="course" id="studcourse" placeholder="Course" required/>
<label>Level</label>
<input type="text" name="year" id="studlevel" placeholder="Level" required/>

onchange 时，我在 JS 上声明的值不起作用（隐藏和显示；设置和取消设置必需属性）。但是，当我打开警报时，onchange 确实有效。这有什么问题？我有这些脚本：

<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>

【问题讨论】：

嗯...您引用了 2 个不同版本的 jQuery。你只需要一个。

标签： javascript jquery input selection

【解决方案1】：

您正在引用 jQuery 函数 .show() 和 .hide()，但您正在使用纯 javascript 定义您的对象。

更新这个（并修复拼写错误“atudentlevel”）：

var studentcourse = $("#studcourse");
var studentlevel = $("#studlevel");

http://jsfiddle.net/V7Qj3/

【讨论】：

您的required 属性仍将按照您在代码中定义的方式添加和删除。这不会对其功能产生任何影响，您只是使用 jQuery 选择器而不是 JS 来定义对象。

【解决方案2】：

如果您想减少代码并提高效率，这里有另一种方法：

$(document).ready(function() {
    $('#thechoices').on('change', do_the_change_studfac);
});

function do_the_change_studfac() {
    var the_position = $('#thechoices').val();
    if (the_position == 'stud'){
        //alert('true');
        $("#studcourse,#studlevel").show().attr("required","required");
    }
    else if (the_position == 'fac'){
        //alert('false');
        $("#studcourse,#studlevel").hide().removeAttr("required","required");
    }
}

由于 studcourse 和 studlevel 的选择器在函数中只被引用一次，而且你对这两个元素做同样的事情......你可以使用 jQuery 链接命令并将它们全部组合起来。

此外，当 the_position=='stud'...默认值时，使用 else 会消除第二次比较。

【讨论】：