Actualmente estoy tratando de hacer una selección con tres opciones: -La primera, es la predeterminada. -la segunda opción muestra las entradas, -y la tercera otras entradas
Mi problema es que cuando elijo la segunda o la tercera opción, mis entradas cambian, así que eso es bueno. Pero cuando selecciono el predeterminado, mis entradas que se seleccionaron previamente no desaparecen.
Hay mi fragmento de código:
$(document).ready(function() { $('#bat').change(function() { $($(this).children("option:selected").attr("data-hide")).hide(); $($(this).children("option:selected").attr("data-show")).show(); $($(this).children("option[value=1]").attr("data1")).hide(); $($(this).children("option[value=1]").attr("data2")).hide(); }); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="bat" name="card_name" class="form-select"> <option data1='#access' data2='#amount' value="1">--Veuillez choisir une option--</option> <option data-hide='#access' data-show='#amount' value="A">Fichier separes : plusieurs fichiers de une page </option> <option data-hide='#amount' data-show='#access' value="B">Fichier multipages : 1 fichier de plusieurs pages </option> </select> <div id="access">div 1</div> <div id="amount">div 2</div>Puede usar el mismo método que usó antes y crear un div alrededor de ambas opciones:
$(document).ready(function() { $('#bat').change(function() { $('#results').show() $($(this).children("option:selected").attr("data-hide")).hide(); $($(this).children("option:selected").attr("data-show")).show(); }); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="bat" name="card_name" class="form-select"> <option data-hide='#results' data1='#access' data2='#amount' value="1">--Veuillez choisir une option--</option> <option data-hide='#access' data-show='#amount' value="A">Fichier separes : plusieurs fichiers de une page </option> <option data-hide='#amount' data-show='#access' value="B">Fichier multipages : 1 fichier de plusieurs pages </option> </select> <div id="results"> <div id="access" style="display:none;">div 1</div> <div id="amount" style="display:none;">div 2</div> </div>Tanto Ocultar como mostrar ocurren simultáneamente, por eso, cuando selecciona el valor de opción predeterminado, ambos div no se muestran. Simplemente levante debajo de dos líneas de código, funcionará bien. Mantengo tu HTML como estaba
$(document).ready(function() { $('#bat').change(function() { $($(this).children("option:selected").attr("data2")).show(); $($(this).children("option:selected").attr("data1")).show(); $($(this).children("option:selected").attr("data-hide")).hide(); $($(this).children("option:selected").attr("data-show")).show(); }); })