- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
现场演示 https://jsfiddle.net/barrycorrigan/23hxgw6y/2/
所以我有一个表单,其中有一些隐藏的选择字段,并且仅根据您从另一个字段中选择的内容显示。运行没有任何问题。
我的问题是当表单提交并且用户从其他字段中选择了一些不同的选项(因为它们只是隐藏的)。它们仍然出现在提交的表单中。
是否有办法清除其他字段中隐藏的选项?我也知道这段代码真的很脏,所以如果有人有任何让它变得更干净的提示,我将不胜感激。
$(document).ready(function() {
toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our underAge field changes
$("#form1_segment").change(function() {
toggleFields();
});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields() {
if ($("#form1_segment").val() == 'Food Service') {
$("#form1_product").show();
$("#form1_product_bc").hide();
$("#form1_product_in").hide();
$("#form1_product_hc").hide();
$("#form1_product_auto").hide();
$("#form1_product_aero").hide();
} else if ($("#form1_segment").val() == 'Building Care') {
$("#form1_product_bc").show();
$("#form1_product").hide();
$("#form1_product_in").hide();
$("#form1_product_hc").hide();
$("#form1_product_auto").hide();
$("#form1_product_aero").hide();
} else if ($("#form1_segment").val() == 'Industry') {
$("#form1_product_in").show();
$("#form1_product").hide();
$("#form1_product_bc").hide();
$("#form1_product_hc").hide();
$("#form1_product_auto").hide();
$("#form1_product_aero").hide();
} else if ($("#form1_segment").val() == 'Health Care') {
$("#form1_product_hc").show();
$("#form1_product").hide();
$("#form1_product_bc").hide();
$("#form1_product_in").hide();
$("#form1_product_auto").hide();
$("#form1_product_aero").hide();
} else if ($("#form1_segment").val() == 'Automotive') {
$("#form1_product_auto").show();
$("#form1_product").hide();
$("#form1_product_bc").hide();
$("#form1_product_in").hide();
$("#form1_product_hc").hide();
$("#form1_product_aero").hide();
} else if ($("#form1_segment").val() == 'Aerospace') {
$("#form1_product_aero").show();
$("#form1_product").hide();
$("#form1_product_bc").hide();
$("#form1_product_in").hide();
$("#form1_product_hc").hide();
$("#form1_product_auto").hide();
} else {
$("#form1_product").hide();
$("#form1_product_bc").hide();
$("#form1_product_in").hide();
$("#form1_product_hc").hide();
$("#form1_product_auto").hide();
$("#form1_product_aero").hide();
}
}
});
最佳答案
您可以使用^
开头选择器来查找所有id
以form1_product
开头的选择,以隐藏它们并清除它们的值。然后切换
以显示正确的选择。
$(document).ready(function() {
toggleFields();
$("#form1_segment").change(function() {
toggleFields();
});
function toggleFields() {
$("[id^=form1_product]").hide().val(null);
switch ($("#form1_segment").val()) {
case "Food Service":
$("#form1_product").show();
break;
case "Building Care":
$("#form1_product_bc").show();
break;
case "Industry":
$("#form1_product_in").show();
break;
case "Health Care":
$("#form1_product_hc").show();
break;
case "Automotive":
$("#form1_product_auto").show();
break;
case "Aerospace":
$("#form1_product_aero").show();
}
}
});
div {
display: block;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1_contact" class="contact-form" action="/en-us/contact" method="post">
<div>
<input id="form1_name" name="name" class="contact-form__input" placeholder="Full Name" type="text" required="required" />
</div>
<div>
<input id="form1_email" name="email" class="contact-form__input" placeholder="Email address" type="email" required="required" />
</div>
<div class="split-form">
<label for="form1_segment">Segment</label>
<select id="form1_segment" name="segment" class="test">
<option value="Select a Segment">Select a Segment</option>
<option value="Food Service">Food Service</option>
<option value="Building Care">Building Care</option>
<option value="Industry">Industry</option>
<option value="Health Care">Health Care</option>
<option value="Automotive">Automotive</option>
<option value="Aerospace">Aerospace</option>
</select>
</div>
<div class="split-form last">
<label for="form1_product">Product</label>
<select id="form1_product" name="product" class="test">
<option value="Select a product">Select a product</option>
<option value="S.U.D.S.® Single Use Dispensing System">S.U.D.S.® Single Use Dispensing System</option>
<option value="Chix® SC Foodservice Towels">Chix® SC Foodservice Towels</option>
<option value="Chix® SC Foodservice Towels">Chix® SC Foodservice Towels</option>
<option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
<option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
<option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
<option value="Chix® Pro-Chlor®">Chix® Pro-Chlor®</option>
<option value="Chix® Microfiber Light Cloths">Chix® Microfiber Light Cloths</option>
<option value="Chix® Plus with Microban">Chix® Plus with Microban</option>
<option value="Chix® Towels with Microban">Chix® Towels with Microban</option>
<option value="Chix® Towels">Chix® Towels</option>
<option value="Chix® Plus Sanitizing">Chix® Plus Sanitizing</option>
<option value="Chix® Soft Cloth">Chix® Soft Cloth</option>
<option value="Chix® Tough">Chix® Tough</option>
<option value="Chix® All Day™">Chix® All Day™</option>
<option value="Chix® Wet Wipes">Chix® Wet Wipes</option>
<option value="Chix® Competitive Wet Wipes">Chix® Competitive Wet Wipes</option>
<option value="Chix® Economy Towels">Chix® Economy Towels</option>
<option value="Chix® 3000">Chix® 3000</option>
<option value="Quix® Pretreated Towels">Quix® Pretreated Towels</option>
<option value="Chix® Apron">Chix® Apron</option>
<option value="Worxwell®">Worxwell®</option>
</select>
<select id="form1_product_bc" name="product_bc" class="test">
<option value="Select a product">Select a product</option>
<option value="Dusty™ High Performance Dust Cloth">Dusty™ High Performance Dust Cloth</option>
<option value="Masslinn® Heavy Duty Dust Cloth">Masslinn® Heavy Duty Dust Cloth</option>
<option value="S.U.D.S.® Single Use Dispensing System">S.U.D.S.® Single Use Dispensing System</option>
<option value="Masslinn® Medium Duty Dust Cloth">Masslinn® Medium Duty Dust Cloth</option>
<option value="Masslinn® Light Duty Dust Cloth">Masslinn® Light Duty Dust Cloth</option>
<option value="Economy Duster">Economy Duster</option>
<option value="Masslinn Dusting Tools">Masslinn Dusting Tools</option>
</select>
<select id="form1_product_in" name="product_in" class="test">
<option value="Select a product">Select a product</option>
<option value="Durawipe® Heavy Duty Shop Towel">Durawipe® Heavy Duty Shop Towel</option>
</select>
<select id="form1_product_hc" name="product_hc" class="test">
<option value="Select a product">Select a product</option>
<option value="Worxwell® Towels">Worxwell® Towels</option>
<option value="Soft Cloth Patient Wipes">Soft Cloth Patient Wipes</option>
<option value="Professional Series">Professional Series</option>
<option value="Dwell™ Disinfectant Compatible Healthcare Towels">Dwell™ Disinfectant Compatible Healthcare Towels</option>
<option value="Dusty™ High Performance Dust Cloths">Dusty™ High Performance Dust Cloths</option>
</select>
<select id="form1_product_auto" name="product_auto" class="test">
<option value="No products available">No products available</option>
</select>
<select id="form1_product_aero" name="product_aero" class="test">
<option value="No products available">No products available</option>
</select>
</div>
<div>
<textarea id="form1_message" name="message" class="contact-form__input contact-form__textarea" cols="30" rows="4" placeholder="Message"></textarea>
</div>
<div>
<input id="form1_submit" name="submit" class="btn btn__round subform__button" value="Send Message" type="submit" />
</div>
</form>
关于javascript - 清除基于另一个字段的选择字段选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35363611/
我有一个网站,我正在通过学校参加比赛,但我在清除 float 元素方面遇到了问题。 该网站托管在 http://www.serbinprinting.com/corey/development/
我有一个清除按钮,需要使用 JQuery 函数清除该按钮单击时的 TextBox 值(输入的)。 最佳答案 您只需将单击事件附加到按钮即可将输入元素的值设置为空。 $("#clearButton").
我们已经创建了一个保存到 CoreData 然后同步到 CloudKit 的 iOS 应用程序。在测试中,我们还没有找到一种方法来清除应用程序 iCloud 容器中的数据(用于用户私有(private
这是一个普遍的问题,也是我突然想到并且似乎有道理的问题。我看到很多人使用清除div 并且知道这有时不受欢迎,因为它是额外的标记。我最近开始使用 因为它接缝代表了它的实际用途。 当然都引用了:.clea
我有两个单选按钮。如果我检查第一个单选按钮下面的数据将填充在组合框中。之后我将检查另一个单选按钮,我想清除组合框值。 EmployeeTypes _ET = new EmployeeTypes(
我一直在玩 Canvas ,我正在尝试制作一个可以移动和跳跃的正方形,移动部分已经完成,但是跳跃部分有一个问题:每次跳跃时它都会跳得更快 here's a jsfiddle 这是代码: ///////
我该如何在 Dart 上做到这一点? 抓取tbody元素后,我想在其上调用empty(),但这似乎不存在: var el = query('#search_results_tbody'); el.em
我需要创建一个二维模拟,但是在设置新的“框架”时,旧的“框架”不会被清除。 我希望一些圆圈在竞技场中移动,并且每个循环都应删除旧圆圈并生成新圆圈。一切正常,但旧的没有被清除并且仍然可见,这就是我需要改
无论我使用set statusline将状态行更改为什么,我的状态行都不会改变。看起来像 ".vimrc" 39L, 578C
在 WPF 应用程序中,我有一个 ListView 绑定(bind)到我的 ViewModel 上的一个 ObservableCollection。 在应用程序运行期间,我需要删除并重新加载集合中的所
我有一个大型程序,一个带有图形的文本扭曲游戏。在我的代码中的某处,我使用 kbhit() 我执行此代码来清除我的输入缓冲区: while ((c = getchar()) != '\n' && c !
我正在将所有网站的页面加载到主索引页面中,并通过将 href 分成段并在主域名后使用 .hash 函数添加段来更新 URL 显示,如下所示: $('a').click(function(event)
我有一个带有 的表单和 2 控件来保存和重置表单。我正在触发 使用 javascript __doPostBack()函数并在其中传递一个值 __EVENTARGUMENT如果面板应该重置。 我的代
我目前有一堆 UIViewController,每个都是在前一个之上呈现的模式 ViewController。我的问题是我不需要一堆 UIViewController,我只需要最后一个。因此,当出现新
我在一个类中有一些属性方法,我想在某个时候清除这个属性的缓存。 示例: class Test(): def __init__(self): pass @property
在此Test Link我试图将标题和主站点导航安装到博客脚本的顶部。 我清除:两者;在主要网站脚本上工作,但现在把所有东西都扔到了一边。尝试了无数次 fixex 都没有成功!提前感谢 Ant 指点解决
我似乎无法正确清除布局。看this 我无法阻止左栏中的元素向下推右栏中的元素。谁能帮忙? Screenshot with some pointy arrows (死链接) 最佳答案 问题标记/样式似
我希望能够在某个类 (sprite-empos) 之后清除 '' 中的内容,想知道是否有不添加任何新类或不使用 js 的方法(我在下面尝试过不工作)? 为了明确它是“985”,我想在某个视口(view
我想清除ptr_array boost::ptr_array a; ... a.clear(); // missing 如何清理 ptr 容器? 最佳答案 它应该表现得像一个数组,您不能在 C++
这是我使用多 map 制作的一个简单的事件系统;当我使用 CEvents::Add(..) 方法时,它应该插入并进入多重映射。问题是,当我触发这些事件时, multimap 似乎是空的。我确定我没有调
我是一名优秀的程序员,十分优秀!