Función de cambio de jquery ocultar y mostrar div - javascript, jquery, html

tengo este código, quiero convertirlo para que el usuario pueda elegir CUALQUIER selección posible y tener div [id="setprice"] aparecer o algo por el estilo. Actualmente tengo 4 opciones, pero podría ser hasta 10+ depende de cuántas hay en la base de datos. pero no debería importar, solo quiero que cualquiera que sea seleccionado para abrir el precio de set div. Gracias.

$("#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>

Parece ser una gran cantidad de cofusión en lo que estoy preguntando,Estas opciones que he dado son nombres aleatorios, las categorías que se van a cargar, son de una base de datos y se podrían agregar más dependiendo de cómo se expanda, por lo que quiero que el script no muestre div = setprice, pero cuando se selecciona algo en #category abrir setprice.

Respuestas

1 para la respuesta № 1

Deberá llamar a la función solo cuando el valor del cuadro de selección no esté vacío.

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

aquí Es un violín de trabajo.

Esto es lo más limpio que obtendrás.

---

0 para la respuesta № 2

MANIFESTACIÓN

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

los $("#setprice").toggle(!!this.value); es solo una forma de usar un boolean dentro de .toggle() método,

de lo contrario lo haces igualmente como:

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

o incluso:

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

---

0 para la respuesta № 3

Encuentra la respuesta a continuación ...

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

---