jQuery zeigen/verstecken mehrere Werte aus dem Dropdown

Ich versuche, einige Checkboxen basierend auf einem Wert aus einem Auswahlfeld zu verstecken. Ich kann herausfinden, wie man es mit nur einem Wert macht (entweder Playstation oder Xbox). Aber ich kann nicht für das Leben von mir herausfinden, wie man es von mehreren Werten im Dropdown tut. Ich möchte, dass es für zwei der Werte im Dropdown-Menü dasselbe tut.jQuery zeigen/verstecken mehrere Werte aus dem Dropdown

Dies ist der Code, den ich bisher habe:

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

EDIT

Mein HTML für das Drop-Down-:

<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-Code für die Kontrollkästchen Ein-/Ausblenden

<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>

Quelle

2017-06-14 Nicolai Knudsen

Können Sie bitte auch Ihren HTML-Code angeben, indem Sie ein [** minimales, vollständiges und überprüfbares Beispiel **] (http://stackoverflow.com/help/mcve) angeben, da dies uns helfen wird, Ihre Frage zu beantworten. Wenn Ihr HTML serverseitig erzeugt wird, schreiben Sie bitte die ** Ausgabe **. Weitere Informationen finden Sie in der Hilfe zu [** Wie stelle ich gute Fragen?] (Http://stackoverflow.com/help/how-to-ask) und auf der [** Tour der Site **] (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(); 
    } 
    }); 

});

Sehen sie in Aktion

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>

Quelle

2017-06-14 01:58:50

Das scheint bei mir nicht zu funktionieren. Es macht immer noch nichts. –

@NicolaiKnudsen versuchen '! == -1' –

Wenn ich diesen Code anwenden, gibt es mir die Warnung. Aber es versteckt die Checkboxen nicht. Weißt du, warum? –

In Ihrem Code die elemets, die Sie zu verstecken bereitgestellten/show existiert in Ihrem Html nicht. Deshalb machst du es falsch.

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>

Quelle

2017-06-14 02:40:11

Scheint wie Sie kopieren/fügen Sie meine Schnipsel zu Ihrer Antwort, ohne eine andere Technik zu machen .. Also gibt es einen logischen Grund dafür zu tun ?? –

* "... die Elemente ... existiert nicht in Ihrem HTML. Deshalb machen Sie es falsch." * - Die 'if'-Bedingung war auch ein ziemlich bedeutendes Problem, wohl etwas, das zuerst behoben werden musste um das andere Problem noch zu bemerken, aber das in Ihrer Erklärung nicht erwähnt? – nnnnnn

Wie einige von Ihnen gesagt haben, ich für meine Etiketten die falschen IDs hatte, und das ist, warum ich nicht funktionieren würde. Ich habe für die letzten 8 Stunden auf dieser Webseite gearbeitet, so muss ich es :-)

übersehen haben

Nur wenn jemand es für das nächste Mal benötigt, ist dies die Lösung kam ich mit:

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

});

Danke für die Hilfe alle!

Quelle

2017-06-14 03:44:28

Da der Schlüsselteil die Methode '$ .inArray()' verwendet und die Element-IDs eher ein Tippfehler waren, haben * und * nun die Anforderung geändert, die Kontrollkästchen zu deaktivieren und nicht zu verbergen ihre Etiketten, wäre es nicht besser gewesen, @ Mohamed-Yousefs Antwort einfach zu akzeptieren? (Diese Antwort beantwortet die Frage nicht, weil sie nichts versteckt/zeigt.) – nnnnnn

P.S. Die if/else-Struktur kann durch einen einzeiligen ersetzt werden: 'jQuery (" # field_379_0, # field_381_2, # field_382_3 "). Prop ({deaktiviert: jQuery.inArray (jQuery (this) .val(), arr_val)! == -1)}); ' – nnnnnn

@nnnnnn Ja, ich habe seine Antwort als richtig akzeptiert! - Ich bin sehr neu zu Stackoverflow, also war ich mir nicht ganz sicher, wie die Dinge hier funktionieren. Das tut mir leid! Und ich bin in der Regel ein Designer, so Codierung ist neu für mich. Ich werde deinen Vorschlag versuchen. Vielen Dank. –

jQuery zeigen/verstecken mehrere Werte aus dem Dropdown

Antwort

Verwandte Themen