我有一个包含选择框的HTML表单。在选择第一个下拉列表时,下一个下拉列表应该使用AJAX自动填充。
在Download Records (id="getCsv")
按钮单击事件上生成CSV文件。问题是,我想强制所有字段。这是jquery代码
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);
}
问题是当我点击Download Records
时,即使第一个选择框是空的,也会弹出第二个选择框的警告框。我尝试用下面的方法来解决这个问题,但没有运气。
if ($("#sel_teacher").attr("selectedIndex") == 0) {
alert("You haven't selected anything!");
return false;
}
有人可以帮帮我吗?任何帮助表示赞赏。
答案 0 :(得分:3)
selectedIndex
是一个属性,使用prop
:
$("#sel_teacher").prop("selectedIndex")
此外,您可以通过仅使用$("#sel_teacher").val()
检索所选值来简化代码,并与空字符串进行比较(假设该选项的value
为空)。
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...
答案 1 :(得分:1)
可能是因为您为第一个文本框提供了默认值。只需将值更改为&#34;&#34; onclick或在该文本框上模糊。
答案 2 :(得分:1)
或者您可以通过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>