jQuery從下拉菜單中顯示/隱藏多個值

我試圖根據選擇框中的值隱藏一些複選框。我可以弄清楚如何用一個值（PlayStation或者Xbox）來完成它。但我不能爲我的生活弄清楚如何從下拉列表中的多個值中做到這一點。我希望它爲下拉列表中的2個值做相同的操作。jQuery從下拉菜單中顯示/隱藏多個值

這是我的代碼至今：

jQuery(function($) { 

    jQuery("select#field_190").change(function() { 
    if (jQuery(this).val() == ["Playstation", "Xbox"]) { 
     jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").hide(); 
    } else { 
    jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").show(); 
    } 
    }); 
});

編輯

我的下拉HTML：

<div class="editfield field_190 field_platform required-field visibility- 
public alt field_type_selectbox"> 


    <label for="field_190"> 
    Platform <span class="bp-required-field-label">(required)</span> 
</label> 


    <select id="field_190" name="field_190" aria-required="true"> 
    <option value="">----</option> 
    <option value="PC">PC</option> 
    <option value="Playstation">Playstation</option> 
    <option value="Xbox">Xbox</option> 
    </select> 

    <p class="field-visibility-settings-notoggle" id="field-visibility-settings-toggle-190"> 
    This field can be seen by: <span class="current-visibility-level">Everyone</span> </p> 


    <p class="description">Choose a which platform you use to play on.</p> 

</div>

HTML的複選框來顯示/隱藏

<div id="field_11" class="input-options checkbox-options"> 
    <label for="field_379_0" class="option-label"> 
    <input type="checkbox" name="field_11[]" id="field_379_0" value="Counter 
Strike : Global Offensive">Counter Strike : Global Offensive</label> 
    <label for="field_380_1" class="option-label"> 
    <input type="checkbox" name="field_11[]" id="field_380_1" value="Diablo 
3">Diablo 3</label> 
    <label for="field_381_2" class="option-label"> 
    <input type="checkbox" name="field_11[]" id="field_381_2" value="League 
of Legends">League of Legends</label> 
    <label for="field_382_3" class="option-label"> 
    <input type="checkbox" name="field_11[]" id="field_382_3" value="World 
of Warcraft">World of Warcraft</label> 
    <label for="field_383_4" class="option-label"> 
    <input type="checkbox" name="field_11[]" id="field_383_4" 
value="Overwatch">Overwatch</label> 
</div>

來源

2017-06-14 Nicolai Knudsen

您能不能包括您的HTML以及提供[**最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve），因爲這將幫助我們回答您的問題。如果您的HTML是在服務器端生成的，請發佈**輸出**。有關詳細信息，請參閱有關[**如何提出良好問題**]（http://stackoverflow.com/help/how-to-ask）的幫助文章，並參加該網站的[**遊覽**]（http://stackoverflow.com/tour)) –

jQuery(function($) { 

    jQuery("select#field_190").change(function() { 
    var arr_val = ["Playstation", "Xbox"]; 
    if (jQuery.inArray(jQuery(this).val(), arr_val) !== -1) { 
     jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").hide(); 
    } else { 
     jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").show(); 
    } 
    }); 

});

看到它在行動

jQuery(function($) { 
 

 
    jQuery("select#field_190").change(function() { 
 
    var arr_val = ["Playstation", "Xbox"]; 
 
    if (jQuery.inArray(jQuery(this).val(), arr_val) !== -1) { 
 
     jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").hide(); 
 
    } else { 
 
     jQuery("label[for='field_339_0'], label[for='field_341_2'], label[for='field_342_3']").show(); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="field_190" name="field_190" aria-required="true"> 
 
    <option value="">----</option> 
 
    <option value="PC">PC</option> 
 
    <option value="Playstation">Playstation</option> 
 
    <option value="Xbox">Xbox</option> 
 
</select> 
 

 
<div id="field_11" class="input-options checkbox-options"> 
 
    <label for="field_339_0" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_339_0" value="Counter 
 
Strike : Global Offensive">Counter Strike : Global Offensive</label> 
 
    <label for="field_340_1" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_340_1" value="Diablo 
 
3">Diablo 3</label> 
 
    <label for="field_341_2" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_341_2" value="League 
 
of Legends">League of Legends</label> 
 
    <label for="field_342_3" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_342_3" value="World 
 
of Warcraft">World of Warcraft</label> 
 
    <label for="field_343_4" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_343_4" 
 
value="Overwatch">Overwatch</label> 
 
</div>

來源

2017-06-14 01:58:50

這似乎不適用於我。它仍然沒有做任何事情。 –

@NicolaiKnudsen嘗試'！== -1' –

當我應用這段代碼時，它給了我警報。但它並不隱藏複選框。你知道爲什麼嗎？ –

在你的代碼，您提供給隱藏elemets /節目不存在於你的HTML。這就是爲什麼你做錯了。

jQuery(function($) { 
 

 
    jQuery("select#field_190").change(function() { 
 
    var arr_val = ["Playstation", "Xbox"]; 
 
    var labelFor = ["field_379_0","field_341_2","field_342_3"]; 
 
    if (jQuery.inArray(jQuery(this).val(), arr_val) !== -1) { 
 
     jQuery("label[for='field_379_0'],label[for='field_381_2'],label[for='field_382_3']").hide(); 
 
    } else { 
 
     jQuery("label[for='field_379_0'],label[for='field_381_2'],label[for='field_382_3']").show(); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="editfield field_190 field_platform required-field visibility- 
 
public alt field_type_selectbox"> 
 

 

 
    <label for="field_190"> 
 
    Platform <span class="bp-required-field-label">(required)</span> 
 
</label> 
 

 

 
    <select id="field_190" name="field_190" aria-required="true"> 
 
    <option value="">----</option> 
 
    <option value="PC">PC</option> 
 
    <option value="Playstation">Playstation</option> 
 
    <option value="Xbox">Xbox</option> 
 
    </select> 
 

 
    <p class="field-visibility-settings-notoggle" id="field-visibility-settings-toggle-190"> 
 
    This field can be seen by: <span class="current-visibility-level">Everyone</span> </p> 
 

 

 
    <p class="description">Choose a which platform you use to play on.</p> 
 

 
</div> 
 

 
<div id="field_11" class="input-options checkbox-options"> 
 
    <label for="field_379_0" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_379_0" value="Counter 
 
Strike : Global Offensive">Counter Strike : Global Offensive</label> 
 
    <label for="field_380_1" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_380_1" value="Diablo 
 
3">Diablo 3</label> 
 
    <label for="field_381_2" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_381_2" value="League 
 
of Legends">League of Legends</label> 
 
    <label for="field_382_3" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_382_3" value="World 
 
of Warcraft">World of Warcraft</label> 
 
    <label for="field_383_4" class="option-label"> 
 
    <input type="checkbox" name="field_11[]" id="field_383_4" 
 
value="Overwatch">Overwatch</label> 
 
</div>

來源

2017-06-14 02:40:11

似乎你複製/粘貼我的代碼片段到您的答案，沒有采取任何不同的技術..所以有沒有這樣做的邏輯理由？ –

*「......元素...不存在於你的Html中，這就是爲什麼你做錯了。」* - 「if」條件也是一個相當重要的問題，可以說是需要首先解決的問題爲了甚至注意到其他問題，但在你的解釋中沒有提到這一點？ – nnnnnn

你們有些人說，我有錯誤的ID爲我的標籤，這就是爲什麼我是行不通的。我已經工作這個網站在過去的8小時，所以我必須忽略它:-)

只是如果有人需要它的下一次，這是我想出瞭解決方案：

jQuery(function($) { 

jQuery("select#field_190").change(function() { 
    var arr_val = ["Playstation", "Xbox"]; 
    if (jQuery.inArray(jQuery(this).val(), arr_val) !== -1) { 
     jQuery("#field_379_0, #field_381_2, #field_382_3").prop({disabled: true}); 
    } else { 
     jQuery("#field_379_0, #field_381_2, #field_382_3").prop({disabled: false}); 
    } 
    }); 

});

感謝大家的幫助！

來源

2017-06-14 03:44:28

考慮到關鍵部分使用'$ .inArray（）'方法，並且元素ID更像是一個錯字，*和*，您似乎已經改變了禁用複選框的要求，而不是隱藏它們，並且他們的標籤，接受@ Mohamed-Yousef的答案不是更好嗎？（這個答案沒有回答這個問題，因爲它沒有隱藏/顯示任何東西。） – nnnnnn

P.S. if/else結構可以用一行代替：'jQuery（「＃field_379_0，＃field_381_2，＃field_382_3」）。prop（{disabled：jQuery.inArray（jQuery（this）.val（），arr_val）！ == -1）}）;' – nnnnnn

@nnnnnn是的，我剛剛接受他的答案是正確的！ - 我非常新的Stackoverflow，所以我不太確定事情在這裏工作。對於那個很抱歉！而我通常是一個設計師，所以編碼對我來說是新的。我會嘗試你的建議。非常感謝你。 –

jQuery從下拉菜單中顯示/隱藏多個值

回答

相關問題