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从下拉菜单中显示/隐藏多个值

回答

相关问题