[英]How to trigger a button to appear only if multiple options from different drop-down menus have been selected
我试图确保在选择了3个单独的下拉菜单中的选项之后,弹出“完成”按钮(无论具体选择如何)。 仅在所有3个下拉菜单均已更改(从无选择变为任何选择)后,该按钮才应显示。
这是我的HTML代码:
{{# sentPt1 }}
<div class="sent nodisplay">
<p class="answer-container dropdown-container">
<p class="question">
<select id="response-quant" class="option" name="answer">
<option disabled selected></option>
<option value={{ QUANT1 }}>{{ QUANT1 }}</option>
<option value={{ QUANT2 }}>{{ QUANT2 }}</option>
</select>
{{ sentPt1 }}
<select id="response-shape" class="option" name="answer">
<option disabled selected></option>
<option value={{ SHAPE1 }}>{{ SHAPE1 }}</option>
<option value={{ SHAPE2 }}>{{ SHAPE2 }}</option>
<option value={{ SHAPE3 }}>{{ SHAPE3 }}</option>
</select>
{{ sentPt2 }}
<select id="response-col" class="option" name="answer">
<option disabled selected></option>
<option value={{ COL1 }}>{{ COL1 }}</option>
<option value={{ COL2 }}>{{ COL2 }}</option>
</select>
{{ sentPt3 }}
</p>
<button id="done" class="nodisplay" onchange="doneChange">Done</button>
</p>
</div>
{{/ sentPt1 }}
这是JS / jQuery部分(目前暂时还不能正常工作):
$('#response-quant, #response-shape, # response-col').change(function() {
$('#done').removeClass('nodisplay');
});
我真的很想找到一个jQuery解决方案,它可以使我保持目前的结构。 我尝试定位#id,.class和许多其他不同的选项。
您可以尝试这样的事情:
var response_quant = false;
var response_shape = false;
var response_col = false;
$('#response-quant').change(function() {
response_quant = true;
if ( response_quant == true && response_shape == true && response_col == true ) {
$('#done').removeClass('nodisplay');
}
});
$('#response-shape').change(function() {
response_shape = true;
if ( response_quant == true && response_shape == true && response_col == true ) {
$('#done').removeClass('nodisplay');
}
});
$('#response-col').change(function() {
response_col = true;
if ( response_quant == true && response_shape == true && response_col == true ) {
$('#done').removeClass('nodisplay');
}
});
我希望这能帮到您。
您可以添加一个if子句:
if($('#response-quant').selectedIndex != 0 && $('#response-shape').selectedIndex != 0 && $('#response-col').selectedIndex != 0){
$('#done').removeClass('nodisplay');
}
尽管我建议使用.css()方法而不是删除类
试试这个:HTML
<div class="sent nodisplay">
<p class="answer-container dropdown-container">
<p class="question">
<select id="response-quant" class="option" name="answer" onchange="quantChange()">
<option disabled selected></option>
<option value={{ QUANT1 }}>{{ QUANT1 }}</option>
<option value={{ QUANT2 }}>{{ QUANT2 }}</option>
</select>
<select id="response-shape" class="option" name="answer" onchange="shapeChange()">
<option disabled selected></option>
<option value={{ SHAPE1 }}>{{ SHAPE1 }}</option>
<option value={{ SHAPE2 }}>{{ SHAPE2 }}</option>
<option value={{ SHAPE3 }}>{{ SHAPE3 }}</option>
</select>
<select id="response-col" class="option" name="answer" onchange="colChange()">
<option disabled selected></option>
<option value={{ COL1 }}>{{ COL1 }}</option>
<option value={{ COL2 }}>{{ COL2 }}</option>
</select>
</p>
<button id="done" onchange="doneChange" hidden>Done</button>
</p>
</div>
JS:
var quant = false;
var shape = false;
var col = false;
function quantChange(){
quant = true;
if (quant == true && shape == true && col == true) {
$('#done').show();
}
}
function shapeChange() {
shape = true;
if (quant == true && shape == true && col == true) {
$('#done').show();
}
}
function colChange() {
col = true;
if (quant == true && shape == true && col == true) {
$('#done').show();
}
}
我想您应该使用.each()
,例如以下工作片段:
(请参阅我的代码中的注释)
$('.option').change(function() { $('#done').removeClass('nodisplay'); // By default, remove the class. $('.option').each(function() { // Then, for each .option… if (!$(this).val()) { // … if there's no option selected … $('#done').addClass('nodisplay'); // … add class, return; // … and stop loop! } }); });
.nodisplay { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> {{# sentPt1 }} <div class="sent"> <div class="answer-container dropdown-container"> <p class="question"> <select id="response-quant" class="option" name="answer"> <option disabled selected></option> <option value={{ QUANT1 }}>{{ QUANT1 }}</option> <option value={{ QUANT2 }}>{{ QUANT2 }}</option> </select> {{ sentPt1 }} <select id="response-shape" class="option" name="answer"> <option disabled selected></option> <option value={{ SHAPE1 }}>{{ SHAPE1 }}</option> <option value={{ SHAPE2 }}>{{ SHAPE2 }}</option> <option value={{ SHAPE3 }}>{{ SHAPE3 }}</option> </select> {{ sentPt2 }} <select id="response-col" class="option" name="answer"> <option disabled selected></option> <option value={{ COL1 }}>{{ COL1 }}</option> <option value={{ COL2 }}>{{ COL2 }}</option> </select> {{ sentPt3 }} </p> <button id="done" class="nodisplay" onchange="doneChange">Done</button> </div> </div> {{/ sentPt1 }}
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.