gpt4 book ai didi

javascript - 使用 jquery 选择级联下拉验证

转载 作者:行者123 更新时间:2023-12-03 09:44:51 26 4
gpt4 key购买 nike

我有一个 HTML 表格,带有基于父值的级联下拉列表,我需要在级联下拉列表中进行一些验证,如何实现这一点?

HTML 代码:

 <html>
<head>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script>
$(function() {
$(".tr_weekly").hide();
$(".tr_monthly").hide();
});

function schedule(value){
if(value == 2){
$(".tr_weekly").show();
$(".tr_monthly").hide();
return false;
}else if(value == 3){
$(".tr_weekly").hide();
$(".tr_monthly").show();
return false;
}else{
$(".tr_weekly").hide();
$(".tr_monthly").hide();
return false;
}
}

function validation (){
if($(".weekly").exists()){
var weekly_schedular= $( "#weekly option:selected" ).text();
alert("Weekly Dropdown enable with value "+weekly_schedular);
}
if($(".monthly").exists()){
var monthly_schedular= $( "#monthly option:selected" ).text();
alert("Monthly Dropdown enable with value "+monthly_schedular);
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" onsubmit="return validation()" >
<table>
<tr>
<td>Schdule By </td>
<td>
<select id="duration" class="selectionBox" onchange="schedule(this.value);" name="duration">
<option value="">select</option>
<option value="1">Daily</option>
<option value="2">Weekly</option>
<option value="3">Monthly</option>
</select>
</td>
</tr>
<tr class='tr_weekly'>
<td>Weekly</td>
<td>
<select id="weekly" name="day" class ='weekly'>
<option value="">select</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
</td>
</tr>
<tr class='tr_monthly'>
<td>Monthly</td>
<td>
<select id="monthly" name="day" class ='monthly'>
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

基于时间表下拉值另一个选择下拉列表(每周/每月)隐藏/显示其工作,但我的问题如下

问题:

如果显示级联下拉列表(每月/每周),则只需对该下拉列表执行验证,就像必须需要选择任何值

最佳答案

尝试以下代码。 Fiddle

$(document).ready(function() {
$(".tr_weekly").hide();
$(".tr_monthly").hide();

$('#duration').change(function() {
var value = $('#duration').val();
if (value == 2) {
$(".tr_weekly").show();
$(".tr_monthly").hide();
return false;
} else if (value == 3) {
$(".tr_weekly").hide();
$(".tr_monthly").show();
return false;
} else {
$(".tr_weekly").hide();
$(".tr_monthly").hide();
}
});
});

更新:对于表单验证,请在单击提交按钮时进行验证。

$('#submit').click(function(){
var value = $('#duration').val();
var month = $('#monthly').val();

if(value == 3 && month == ""){
alert("Please select Monthly value");
}

});

关于javascript - 使用 jquery 选择级联下拉验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31068111/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com