Tengo trabajo avanzado en mi proyecto generador de documentos. Es simple. Alguien escribe la fecha y en el documento está escrito (por ejemplo, el nombre de la empresa se usa más de 50 veces, por lo que tiene una gran ventaja).
select.onchange = function() { if (select == "firma") { $("#osoba_fizyczna").toggleClass('hidden', 'visibility'); $('#firma').toggleClass('visibility', 'hidden'); } else { $('#firma').toggleClass('hidden', 'visibility'); $('#osoba_fizyczna').toggleClass('visibility', 'hidden'); } } hidden { display: none; } visibility { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select"> <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option> <option value="Firma">firma</option> </select>Primero, no tiene ningún elemento en su ejemplo que se vea afectado por su guión y muestre el resultado práctico. Así que agregué dos elementos en el fragmento a continuación que tienen esos ID, el segundo tiene la clase "oculta".
En segundo lugar, use select.value en su condición en lugar de simplemente select
Y como tercer paso, sugeriría usar solo una clase (en mi fragmento, la clase "oculta") y alternar el parámetro de display con eso; si se elimina, el elemento tendrá la visualización de block predeterminada.
Y por último, las reglas CSS para las clases deben tener un punto delante del nombre de la clase para que sean selectores de clase válidos.
select.onchange = function() { if (select.value == "Firma") { $('#osoba_fizyczna').toggleClass('hidden'); $('#firma').toggleClass('hidden'); } else { $('#firma').toggleClass('hidden'); $('#osoba_fizyczna').toggleClass('hidden'); } } .hidden { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select"> <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option> <option value="Firma">firma</option> </select> <div id="firma" class="hidden">This is the "firma" element</div> <div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>Y, de hecho, con solo dos valores de opción podrías escribir la función mucho más simple:
select.onchange = function() { $('#osoba_fizyczna, #firma').toggleClass('hidden'); } .hidden { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select"> <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option> <option value="Firma">firma</option> </select> <div id="firma" class="hidden">This is the "firma" element</div> <div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>Creo que estás confundido acerca de algunas cosas. Primero, toggleClass() no toma dos argumentos de clase. Alternarías dos como 'one two '. Consulte https://api.jquery.com/toggleclass .
Luego, las clases se definen en CSS con puntos al frente, como .hidden . Realmente, sin embargo, ni siquiera necesitas hacer eso. Simplemente use los métodos show() y hide() de jQuery.
Además, debe orientar su elemento de selección por ID de manera diferente. Estaba apuntando a todos los elementos seleccionados con una técnica nativa de JavaScript que no era del todo correcta.
$('#select').change(function() { if ($(this).val() === "Firma") { $("#osoba_fizyczna").hide(); $('#firma').show(); } else { $('#firma').hide(); $('#osoba_fizyczna').show(); } }); .hidden { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select"> <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option> <option value="Firma">firma</option> </select> <div id="osoba_fizyczna" class="hidden">osoba_fizyczna</div> <div id="firma" class="hidden">firma</div>para la parte de Javascript, como toggleCalss no puede tomar dos parámetros, creo que es mejor usar las funciones addClass y removeClass .
select.onchange = function() { if ($("#select").val() == "Firma") { $("#osoba_fizyczna").addClass('visibility').removeClass('hidden'); $('#firma').addClass('hidden').removeClass('visibility'); } else { $("#firma").addClass('visibility').removeClass('hidden'); $('#osoba_fizyczna').addClass('hidden').removeClass('visibility'); } } Para la parte de CSS, solo agrego un punto . mencionar que es una clase
.hidden { display: none; } .visibility { display: block; }Para la parte HTML, agrego Ids para las dos opciones
<select id="select"> <option id="osoba_fizyczna" value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option> <option id="firma" value="Firma">firma</option> </select>