Javascript 如果从选择框中未选择任何值(标题除外),则返回false
我有一个带有选择框的HTML表单。在选择第一个下拉列表时,应使用AJAX自动填充下一个下拉列表 在下载记录id=getCsv按钮时,单击事件生成CSV文件。问题是,我想将所有字段都设置为必填字段。这是jquery代码Javascript 如果从选择框中未选择任何值(标题除外),则返回false,javascript,jquery,html,validation,Javascript,Jquery,Html,Validation,我有一个带有选择框的HTML表单。在选择第一个下拉列表时,应使用AJAX自动填充下一个下拉列表 在下载记录id=getCsv按钮时,单击事件生成CSV文件。问题是,我想将所有字段都设置为必填字段。这是jquery代码 var teacher_name = $("#sel_teacher option:selected").text(); var unittest_name = $("#sel_test1 option:selected").text(); var class_name = $(
var teacher_name = $("#sel_teacher option:selected").text();
var unittest_name = $("#sel_test1 option:selected").text();
var class_name = $("#sel_class1 option:selected").text();
var class_id = $('#sel_class1').val();
var division_name = $("#sel_div1 option:selected").text();
var division_id = $('#sel_div1').val();
var subject_name = $("#sel_sub1 option:selected").text();
if (teacher_name == "") {
alert('Please Select Teacher Name.');
return false;
} else if(class_name == "") {
alert('Please Select Class Name.');
return false;
} else if(division_name == "") {
alert('Please Select Division Name.');
return false;
} else if(subject_name == "") {
alert('Please Select Subject Name.');
return false;
} else if(unittest_name == "") {
alert('Please Select Unit Test Name.');
return false;
} else {
var myObject = new Object();
myObject.class_name = class_name;
myObject.class_id = class_id;
myObject.division_name = division_name;
myObject.division_id = division_id;
myObject.subject_name = subject_name;
myObject.test_name = unittest_name;
var formData = JSON.stringify(myObject);
$('#getCsv').attr('href','csv_generator.php?data=' + formData);
}
问题是,当我单击下载记录时,即使第一个选择框为空,也会直接弹出第二个选择框的警告框。我试图用下面的方法解决这个问题,但没有成功
if ($("#sel_teacher").attr("selectedIndex") == 0) {
alert("You haven't selected anything!");
return false;
}
有人能帮我吗?感谢您的帮助。selectedIndex是一个属性,请使用道具:
此外,您还可以简化代码,只需使用$sel_teacher.val检索所选值,并假设该选项的值为空,将其与空字符串进行比较
var teacher_name = $("#sel_teacher").val();
// get other <select /> values here...
if (teacher_name == '') {
alert("You haven't selected anything!");
return false;
}
// test other values here...
这可能是因为您为第一个文本框指定了默认值。只需将该文本框上的值更改为onclick或on blur。或者您可以通过HTML5属性required和添加onchange事件侦听器来处理此问题
<select name="sel_teacher" onchange="get_value();" id="sel_teacher" required>
<option>--Select Teacher Name--</option>
</select>
<script>
function get_value() {
var teacher_name = $("#sel_teacher").val();
// get other <select /> values here...
if (teacher_name == '') {
alert("You haven't selected anything!");
return false;
} else {
// write code when teacher_name is selected
}
}
</script>
请出示相关的HTML。如果给select选项一个值,空的一个值=则$sel_teacher.val将给您一个适当的字符串以进行测试并尝试更改。val var teacher_name的文本=$sel_teacher option:selected.val@mplungjan我没有发布HTML代码,因为我认为一个简单的图像将有助于更好地理解问题。选项的价值至关重要,HTML将是有帮助的。例如,我在这里投票最多的答案是关于第一个选项必须有一个HTML5的空白值才能工作。
<select name="sel_teacher" onchange="get_value();" id="sel_teacher" required>
<option>--Select Teacher Name--</option>
</select>
<script>
function get_value() {
var teacher_name = $("#sel_teacher").val();
// get other <select /> values here...
if (teacher_name == '') {
alert("You haven't selected anything!");
return false;
} else {
// write code when teacher_name is selected
}
}
</script>