javascript 条件形式取决于选择列表中的答案不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21777481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conditional form depending on answers in select list not working
提问by Justin Othername
i'm building a simple form where input fields are enabled depending on a choice a user makes in a select list. I'm using a little javascript for this.
I get it to work for one condition but there are 2 conditions within the form.
Firstis a select drop down where depending on one of the two answers 2 input fields appear.
The secondis an input field that appears depending on one option chosen in a select list (namely "other")
我正在构建一个简单的表单，其中根据用户在选择列表中所做的选择启用输入字段。我为此使用了一些 javascript。
我让它在一个条件下工作，但表单中有两个条件。
第一个是选择下拉列表，根据两个答案之一显示 2 个输入字段。
所述第二是，取决于在选择列表中选择一个选项显示为输入字段（即“其他”）
here is the html:
这是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>
Sorrybut my html code is normally longer but it keeps getting cut off by the editor. I assume it's because it encountered a closing div? You can see the full code in the jsfiddle
抱歉，我的 html 代码通常更长，但它一直被编辑器切断。我认为这是因为它遇到了一个关闭的 div？你可以在jsfiddle中看到完整的代码
here is the js:
这是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();
}
});
});
here is the fiddle: http://jsfiddle.net/4EmE5/2/
这是小提琴：http: //jsfiddle.net/4EmE5/2/
Hope you can help
希望你能帮忙
回答by Dipak Ingole
Reposting as per Master @Kevin Bowersoxsupporting comment
根据大师@Kevin Bowersox支持评论重新发布
Do following changes to your code,
对您的代码进行以下更改，
HTML,
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:
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");
});
DEMO
演示
回答by Kevin Bowersox
The markup should be changed to add idattributes to each selectelement you would like to attach an event to. This allows the code to discern which selectthe appropriate event handler should be attached to.
应更改标记以将id属性添加到select您希望将事件附加到的每个元素。这允许代码辨别select应该附加到哪个适当的事件处理程序。
I have introduced several improvements to the script. For instance, instead of comparing the text of the selected option, simply retrieve the value of the selectand compare it to the appropriate value associated with the text. Also, since these elements are simply in an show/hide state you can pass a boolean expression to toggleto conditionally toggle the visibility of the corresponding elements. Notice the selector can select multiple elements by providing a comma separated list of selectors.
我已经对脚本进行了一些改进。例如，无需比较所选选项的文本，只需检索 的值select并将其与与文本关联的适当值进行比较。此外，由于这些元素只是处于显示/隐藏状态，您可以传递一个布尔表达式toggle来有条件地切换相应元素的可见性。请注意，选择器可以通过提供逗号分隔的选择器列表来选择多个元素。
Javascript
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 Changes
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 Fiddle:http://jsfiddle.net/4EmE5/9/
JS小提琴：http : //jsfiddle.net/4EmE5/9/
