下拉菜单选项为“必要”类添加到另一个下拉菜单中选择,但是当
问题描述:
我需要被“必要”的某些字段,从而具有用于jquery.validate.js和类中删除类的其他选项=”需要”等下拉菜单选项为“必要”类添加到另一个下拉菜单中选择,但是当
唯一的问题是我已经作出当通过使隐藏的div变得可见使用选择上一个下拉输入某个选项的形式延伸:显示:None,然后显示:块。
一个在扩展DIV字段的需要是必需的字段,但如果我设置为类=“需要”。即使隐藏并且不需要,验证仍然需要来自该字段的值。
所以,我需要做的就是添加或删除class =“required”,或者随时切换出现在窗体上的观看选择输入的切换。
以下是我如何尝试编码,但它似乎并没有工作 非常感谢任何人可以提供帮助,我希望我对我的解释有道理。
该第一比特通过在下拉选项的选择,显示一个隐藏的div延伸的形式。
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
if (txt.match(id1)) {
document.getElementById(id1).style.display = 'block';
}
if (txt.match(id2)) {
document.getElementById(id2).style.display = 'block';
}
if (txt.match(id3)) {
document.getElementById(id3).style.display = 'block';
}
}
// ]]>
</script>
// This is how I have tried to add & remove the required class.
<script type="text/javascript">
$('#category').change(function(){
if ($('#category').val() =='id1') {
$('#size').addClass('required');
} else {
$('#size').removeClass('required');
}
}
</script>
<html>
<form class="orderform" action="FormNext.php" method="post" name="OrderForm" id="OrderForm">
<select id="category" name="category" class="required" onchange="display(this,'id1','id2','id3');">
<option value="">- please select -</option>
<option value="id1">Category1</option>
<option value="id2">Category2</option>
<option value="id3">Category3</option>
</select>
<div id="id1">
<select name="size" id="size" class="">
<option value="">Please Select</option>
<option value="xsmall">extra small </option>
<option value="small">small </option>
<option value="medium">medium</option>
<option value="large">large </option>
<option value="xlarge">extra large</option>
</select>
</div>
</form>
</html>
答
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
if (txt.match(id1)) {
document.getElementById(id1).style.display = 'block';
}
if (txt.match(id2)) {
document.getElementById(id2).style.display = 'block';
}
if (txt.match(id3)) {
document.getElementById(id3).style.display = 'block';
}
}
$(document).ready(function(){
$('#category').change(function(){
var selectedValue = $('#category').val();
$('#size').removeClass('required');
$('#' + selectedValue + ' > select').addClass('required');
});
});
</script>
</head>
<body>
<form class="orderform" action="FormNext.php" method="post" name="OrderForm" id="OrderForm">
<select id="category" name="category" class="required" onchange="display(this,'id1','id2','id3');">
<option value="">- please select -</option>
<option value="id1">Category1</option>
<option value="id2">Category2</option>
<option value="id3">Category3</option>
</select>
<div id="id1" style="display:none">
<select name="size" id="size" class="">
<option value="">Please Select</option>
<option value="xsmall">extra small </option>
<option value="small">small </option>
<option value="medium">medium</option>
<option value="large">large </option>
<option value="xlarge">extra large</option>
</select>
</div>
<div id="id2" style="display:none">
<select name="size" id="size" class="">
<option value="">Please Select</option>
<option value="xsmall">extra small </option>
<option value="small">small </option>
<option value="medium">medium</option>
<option value="large">large </option>
<option value="xlarge">extra large</option>
</select>
</div>
<div id="id3" style="display:none">
<select name="size" id="size" class="">
<option value="">Please Select</option>
<option value="xsmall">extra small </option>
<option value="small">small </option>
<option value="medium">medium</option>
<option value="large">large </option>
<option value="xlarge">extra large</option>
</select>
</div>
</form>
我假设你错过#大小和类别。尝试,让我知道
#所使用的ID和选择。用于按类名选择标签,如果要选择元素,则直接提及它。
验证规则也存在一个小问题。选择元素始终有一个值,因此将始终满足所需的条件。你可能想添加一个... val()!==“” – darronz 2013-02-28 06:33:50
我已经改变了很多次,所以没有意识到在我的文章中调用id,class或元素本身可能并不一致。这可能是为什么它不工作,但我期待找出哪些我应该呼吁它工作。我对编码很陌生,所以我很抱歉如果我没有什么意义。 这个javascript看起来接近于与上面的问题和结果有关吗? – 2013-02-28 06:42:03
哦...在这种情况下, – 1Mayur 2013-02-28 06:47:41