我有这个表单我正在尝试添加条件逻辑。我在网上找到了一个教程，但是我的js仍然不是那么强。你介意看看我弄乱了吗？我确实设法让字段隐藏起来。但这更像是一个css的事情。我过去常用的教程was this one.
$(document).ready(function() {
var wings = false;
//Inputs that determine what fields to show
var wings50 = $('#live_form input:checkbox[name=wings50]');
var wings25 = $('#live_form input:checkbox[name=wings25]');
//Wrappers for all fields
var div_wings50_parent = $('#live_form #div_wings50');
var div_wings25_parent = $('#live_form #div_wings25');
var all = bad.add(div_wings50_parent).add(div_wings25_parent);
wings50.change(function() {
var value = this.value;
all.addClass('hidden'); //hide everything and reveal as needed
if (value == '50OFAKIND') {
div_wings50_parent.removeClass('hidden');
} else if (value == '25OFAKIND') {
div_wings25_parent.removeClass('hidden');
}
});
});.hidden {
display: none;
}<!-- Start Formoid form-->
<link rel="stylesheet" href="gramdslam_files/formoid1/formoid-flat-yellow.css" type="text/css" />
<link rel="stylesheet" href="gramdslam_files/formoid1/bootstrap-iso.css" type="text/css" />
<script type="text/javascript" src="gramdslam_files/formoid1/jquery.min.js"></script>
<script type="text/javascript" src="gramdslam_files/formoid1/conditional.js"></script>
<form class="formoid-flat-yellow" id="#live_form" style="background-color:#ffffff;font-size:14px;font-family:'Lato', sans-serif;color:#666666;max-width:480px;min-width:150px" method="post">
<div class="title">
<h2>GRAND SLAM</h2>
</div>
<div class="element-select" title="Define what pizza options you want. "><label class="title">PIZZA OPTIONS<span class="required">*</span></label>
<div class="large"><span><select name="select" required="required">
<option value="2 Cheese">2 Cheese</option>
<option value="2 Pepporoni">2 Pepporoni</option>
<option value="1 Cheese & 1 Peporoni">1 Cheese & 1 Peporoni</option></select><i></i></span></div>
</div>
<div class="element-select" title="Select how you will be ordering your wings."><label class="title">SELECT WING OPTION<span class="required">*</span></label>
<div class="large"><span><select name="select1" required="required">
<option value="Select">Please Select</option>
<option value="50OFAKIND">50 OF A KIND</option>
<option value="25OFAKIND">SPLIT 25/25 OF A KIND</option></select><i></i></span></div>
</div>
<div class="element-select hidden" title="Select 1 the following."><label class="title">SELECT ONE<span class="required">*</span></label>
<div class="large"><span><select name="select2" required="required">
<option value="50 Plain">50 Plain</option>
<option value="50 Buffalo">50 Buffalo</option>
<option value="50 BBQ">50 BBQ</option></select><i></i></span></div>
</div>
<div class="element-multiple hidden" title="Select 1 the following."><label class="title">SELECT TWO<span class="required">*</span></label>
<div class="large"><select data-no-selected="Nothing selected" name="multiple[]" multiple="multiple" required="required">
<option value="25 Plain">25 Plain</option>
<option value="25 Buffalo">25 Buffalo</option>
<option value="25 BBQ">25 BBQ</option></select></div>
</div>
<div class="element-number" title="How many Grand Slam packages do you need? 1 feeds 8."><label class="title">How many Grand Slam packages do you need? 1 feeds 8.<span class="required">*</span></label><input class="small" type="text" min="1" max="100" name="number" required="required" value="" /></div>
<div class="element-textarea" title="If you have any special instructions for your order, please add them here. "><label class="title">Add Special Instructions for your order here.</label><textarea class="small" name="textarea" cols="20" rows="5"></textarea></div>
<div class="submit"><input type="submit" value="ADD TO ORDER" /></div>
</form>
<p class="frmd"><a href="http://formoid.com/v29.php">contact us form</a> Formoid.com 2.9</p>
<script type="text/javascript" src="gramdslam_files/formoid1/formoid-flat-yellow.js"></script>
<!-- Stop Formoid form-->
答案 0 :(得分：0)
这里的主要问题是您的选择器。从这开始：
从表单中的ID属性中删除#
<form class="formoid-flat-yellow" id="live_form" style="background-color:#ffffff;font-size:14px;font-family:'Lato', sans-serif;color:#666666;max-width:480px;min-width:150px" method="post">
为输入提供唯一的ID或类
<select id="wings-input" name="select1" required="required">
更新jQuery选择器以选择正确的
var wings_input= $('#live_form #wings-input');
从现在开始，您可以正确添加条件。我已添加基本提醒，因此您可以看到其正常工作：https://jsfiddle.net/L6zjr92o/
答案 1 :(得分：0)
问题是选择器引用。检查此代码......
$(document).ready(function() {
var selectWings = $("select[name='wings']");
var select50 = $("select[name='wings50']");
var select25 = $("select[name='wings25']");
selectWings.change(function(){
var val = selectWings.val();
if(val=="50OFAKIND"){
$("#parent_wings50").show();
$("#parent_wings25").hide();
}
if(val=="25OFAKIND"){
$("#parent_wings50").hide();
$("#parent_wings25").show();
}
});
});.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Start Formoid form-->
<link rel="stylesheet" href="gramdslam_files/formoid1/formoid-flat-yellow.css" type="text/css" />
<link rel="stylesheet" href="gramdslam_files/formoid1/bootstrap-iso.css" type="text/css" />
<script type="text/javascript" src="gramdslam_files/formoid1/jquery.min.js"></script>
<script type="text/javascript" src="gramdslam_files/formoid1/conditional.js"></script>
<form class="formoid-flat-yellow" id="#live_form" style="background-color:#ffffff;font-size:14px;font-family:'Lato', sans-serif;color:#666666;max-width:480px;min-width:150px" method="post">
<div class="title">
<h2>GRAND SLAM</h2>
</div>
<div class="element-select" title="Define what pizza options you want. "><label class="title">PIZZA OPTIONS<span class="required">*</span></label>
<div class="large"><span><select name="select" required="required">
<option value="2 Cheese">2 Cheese</option>
<option value="2 Pepporoni">2 Pepporoni</option>
<option value="1 Cheese & 1 Peporoni">1 Cheese & 1 Peporoni</option></select><i></i></span></div>
</div>
<div class="element-select" title="Select how you will be ordering your wings." id="selectwings"><label class="title">SELECT WING OPTION<span class="required">*</span></label>
<div class="large"><span><select name="wings" required="required">
<option value="Select">Please Select</option>
<option value="50OFAKIND">50 OF A KIND</option>
<option value="25OFAKIND">SPLIT 25/25 OF A KIND</option></select><i></i></span></div>
</div>
<div class="element-select hidden" title="Select 1 the following." id="parent_wings50">
<label class="title">SELECT ONE<span class="required">*</span></label>
<div class="large"><span>
<select name="wings50" required="required">
<option value="50 Plain">50 Plain</option>
<option value="50 Buffalo">50 Buffalo</option>
<option value="50 BBQ">50 BBQ</option>
</select><i></i></span></div>
</div>
<div class="element-multiple hidden" title="Select 1 the following." id="parent_wings25"><label class="title">SELECT TWO<span class="required">*</span></label>
<div class="large">
<select data-no-selected="Nothing selected" name="wings25" multiple="multiple" required="required">
<option value="25 Plain">25 Plain</option>
<option value="25 Buffalo">25 Buffalo</option>
<option value="25 BBQ">25 BBQ</option></select></div>
</div>
<div class="element-number" title="How many Grand Slam packages do you need? 1 feeds 8."><label class="title">How many Grand Slam packages do you need? 1 feeds 8.<span class="required">*</span></label><input class="small" type="text" min="1" max="100" name="number" required="required" value="" /></div>
<div class="element-textarea" title="If you have any special instructions for your order, please add them here. "><label class="title">Add Special Instructions for your order here.</label><textarea class="small" name="textarea" cols="20" rows="5"></textarea></div>
<div class="submit"><input type="submit" value="ADD TO ORDER" /></div>
</form>
<p id="result"></p>
<p class="frmd"><a href="http://formoid.com/v29.php">contact us form</a> Formoid.com 2.9</p>
<script type="text/javascript" src="gramdslam_files/formoid1/formoid-flat-yellow.js"></script>
<!-- Stop Formoid form-->