僅當從不同的下拉菜單中選擇了多個選項時，如何觸發按鈕出現

Question

我試圖確保在選擇了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和許多其他不同的選項。

Answer 1

您可以嘗試這樣的事情：

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');
}
});

我希望這能幫到您。

Answer 2

您可以添加一個if子句：

if($('#response-quant').selectedIndex != 0 && $('#response-shape').selectedIndex != 0 && $('#response-col').selectedIndex != 0){
    $('#done').removeClass('nodisplay');
}

盡管我建議使用.css（）方法而不是刪除類

Answer 3

試試這個：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();
        }
    }

Answer 4

我想您應該使用.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 }} 

希望能幫助到你。