fonction de changement jquery masquer et afficher div - javascript, jquery, html

avoir ce code, je veux le convertir pour pouvoir permettre à l'utilisateur de sélectionner N'IMPORTE QUELLE sélection possible et d'avoir div [id="setprice"] apparaître ou quelque chose à cet effet. actuellement, j'ai 4 options, mais cela peut aller jusqu'à 10+, selon le nombre qui se trouve dans la base de données. mais cela ne devrait pas avoir d'importance, je veux juste choisir celui qui sera sélectionné pour ouvrir la div setprice. Merci.

$("#category").change(function () {

$("#setprice").hide();

if ($(this).val() == "cow") { $("[id="setprice"]").show(); }
else if ($(this).val() == "dog") {  $("[id="setprice"]").show(); }
else if ($(this).val() == "monkey") {  $("[id="setprice"]").show(); }
else if ($(this).val() == "kungfoo") {  $("[id="setprice"]").show(); }
});

HTML

<select id="category">
<option value="">Select</option>
<option value="cow">Cow</option>
<option value="dog">Dog</option>
<option value="monkey">Monkey</option>
<option value="kungfoo">kungfoo</option>
</select>

<div id="setprice">this is hidden onload, then shows on any #category selection</div>

Semble être beaucoup de cofusion dans ce que je demande,Ces options que j'ai données sont des noms aléatoires, les catégories qui vont être chargées, proviennent d'une base de données et d'autres pourraient être ajoutées en fonction de la façon dont elle se développe, donc je veux que le script ne montre pas div = setprice, mais quand quelque chose est sélectionné dans #category ouvrir setprice.

Réponses:

1 pour la réponse № 1

Vous devrez appeler la fonction uniquement lorsque la valeur de la zone de sélection n'est pas vide.

$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});

Ici est un violon de travail.

C'est le plus propre que vous obtiendrez.

---

0 pour la réponse № 2

DEMO

$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});

le $("#setprice").toggle(!!this.value); est juste un moyen d'utiliser un boolean à l'intérieur de .toggle() méthode,

sinon vous le faites également comme:

var $setPriceEl = $("#setprice");
$("#category").change(function () {
$setPriceEl.hide();                // hide by default
if(this.value) $setPriceEl.show(); // show only if has value
});

ou même:

$("#category").change(function () {
$("#setprice")[this.value ? "show" : "hide" ]();
});

---

0 pour la réponse № 3

Veuillez trouver la réponse ci-dessous ...

HTML :

<select id="category">
<option value="">Select</option>
<option value="cow">Cow</option>
<option value="dog">Dog</option>
<option value="monkey">Monkey</option>
<option value="kungfoo">kungfoo</option>
</select>

<div id="setprice" style="display:none;">this is hidden onload,
then shows on any #category selection</div>

JQUERY :

$(document).ready(function(){

$("#category").change(function() {
$("#category option:selected" ).each(function() {
var str = $( this ).text();
if(str == "Select"){
$("#setprice").hide();
}else{
$("#setprice").show();
$("#setprice").text(str);
}
});

}).trigger("change");
});

---