[英]Conditional form depending on answers in select list not working
我正在构建一个简单的表单,其中输入字段的启用取决于用户在选择列表中的选择。 我正在使用一些小的JavaScript。
我让它为一个条件工作,但表格中有2个条件。
首先是选择下拉菜单,根据两个答案之一,出现2个输入字段。
第二个是输入字段,根据选择列表中选择的一个选项(即“其他”)出现
这是html:
<div class="form-div1">
<label>Select your profile</label>
<br>
<select>
<option value="option1">I'm a first-time user</option>
<option value="option2">I would like to renew or upgrade</option>
</select>
对不起,但我的HTML代码通常更长,但它一直被编辑器切断。 我认为这是因为它遇到了一个结束div? 你可以在jsfiddle中看到完整的代码
这是js:
$(document).ready(function () {
$('.form-div2').show();
$('.form-div3').show();
$('.form-div4').show();
$('.form-div42').hide();
$('.form-div5').show();
$('#select').change(function () {
if ($('#select option:selected').text() == "I'm a first-time user") {
$('.form-div2').show();
$('.form-div3').show();
} else if ($('#select option:selected').text() == "I would like to renew or upgrade") {
$('.form-div2').hide();
$('.form-div3').hide();
}
});
$('#select').change(function () {
if ($('#select option:selected').text() == "Other") {
$('.form-div42').show();
} else if ($('#select option:selected').text() !== "Other") {
$('.form-div42').hide();
}
});
});
这里是小提琴: http : //jsfiddle.net/4EmE5/2/
希望你能帮忙
根据大师@Kevin Bowersox的回复支持评论
对您的代码进行以下更改:
HTML,
<div class="form-div1">
<label>Select your profile</label>
<br />
<select id='user'>
<option value="option1">I'm a first-time user</option>
<option value="option2">I would like to renew or upgrade</option>
</select>
</div>
<div class="form-div2">
<label>SEN</label>
<br />
<input type "text" name="input1" class="input1" />
</div>
<div class="form-div3">
<label>Email Address</label>
<br>
<input type "text" name="input2" class="input2">
</div>
<div class="form-div4">
<label>Select your product</label>
<br>
<select id='product'>
<option value="option1">Product1</option>
<option value="option2">Other</option>
</select>
</div>
<div class="form-div42">
<label>Specify your product</label>
<br>
<input type "text" name="input2" class="input2">
</div>
<div class="form-div5">
<label>Select your license</label>
<br />
<select>
<option value="option1">25 users</option>
<option value="option2">50 users</option>
</select>
</div>
JS:
$('.form-div2, .form-div3, .form-div4, .form-div5').show();
$('.form-div42').hide();
$('#user').change(function () {
var selected = $('#user option:selected').text();
$('.form-div2, .form-div3').toggle(selected == "I'm a first-time user");
});
$('#product').change(function () {
var selected = $('#product option:selected').text();
$('.form-div42').toggle(selected == "Other");
});
应更改标记以将id
属性添加到要将事件附加到的每个select
元素。 这允许代码识别应该附加哪个select
适当的事件处理程序。
我已经介绍了几个脚本的改进。 例如,不是比较所选选项的文本,只需检索select
的值并将其与与文本关联的适当值进行比较。 此外,由于这些元素只是处于显示/隐藏状态,因此您可以传递布尔表达式以toggle
以有条件地切换相应元素的可见性。 请注意,选择器可以通过提供逗号分隔的选择器列表来选择多个元素。
使用Javascript
$(document).ready(function () {
$('.form-div2, .form-div3, .form-div4, .form-div5').show();
$('.form-div42').hide();
$('#user-type').change(function () {
$('.form-div2, .form-div3').toggle($(this).val() == "option1");
});
$('#product').change(function () {
$('.form-div42').toggle($(this).val() == "option2");
});
});
HTML更改
<select id="user-type">
<option value="option1">I'm a first-time user</option>
<option value="option2">I would like to renew or upgrade</option>
</select>
<select id="product">
<option value="option1">Product1</option>
<option value="option2">Other</option>
</select>
JS小提琴: http : //jsfiddle.net/4EmE5/9/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.