<div class="crypto-opt-container mt-md-5"> <label">Which Crypto would you like to Deposit with?</label> <div class="dropdown w-100"> <select class="form-select p-2 deposit-dropdown" aria-label="Default select example"> <option selected>Choose Crypto Option:</option> <option value="1">Bitcoin</option> <option value="2">Ethereum</option> <option value="3">USDT</option> </select> </div> </div> <div class="depo-add-container mt-md-5"> <label>Deposit Address:</label> <div class="d-flex flex-row justify-content-between"> <p class="mb-0 me-1 py-2 ps-4 add-text1" id="p1"> ygwbfewilskfhnewisfklnewiofjfhjky </p> <p class="mb-0 me-1 py-2 ps-4 add-text2" id="p2"> ygwbfewilskfhnewisfklnewiofjfhrrt </p> <p class="mb-0 me-1 py-2 ps-4 add-text3" id="p3"> ygwbfewilskfhnewisfklnewiofewfygi </p> <button class="btn-primary w-20 px-3 copy-btn" onclick="copyToClipboard('#p1')"> Copy <i class="fa-regular fa-copy ps-2"></i> </button> </div> </div> .add-text2, .add-text3{ display: none; }EXPLICACIÓN:
Quiero que p.add-text (1,2 y 3) cambie la visualización de none a block según la option en la que el usuario haga clic, de modo que si se hace clic en <option value="1">Bitcoin</option> entonces esto <p class="mb-0 me-1 py-2 ps-4 add-text1" id="p1">ygwbfewilskfhnewisfklnewiofjfhjky</p> se display: block y así sucesivamente.
En esencia, option values= "1,2,3" solo deberían mostrar p.add-text1,2,3 respectivamente.
¡Javascript solo responde por favor!
Esto seguramente te ayudará :)
let value = 0; let selectBtn = document.querySelector('select'); let p1 = document.querySelector('#p1'); let p2 = document.querySelector('#p2'); let p3 = document.querySelector('#p3'); selectBtn.addEventListener('change', () => { if (selectBtn.value == 1) { p1.classList.remove('add-text1'); p2.classList.add('add-text2'); p3.classList.add('add-text3'); } else if (selectBtn.value == 2) { p1.classList.add('add-text1'); p2.classList.remove('add-text2'); p3.classList.add('add-text3'); } else if ( selectBtn.value == 3 ) { p1.classList.add('add-text1'); p2.classList.add('add-text2'); p3.classList.remove('add-text3'); } }) .add-text1, .add-text2, .add-text3{ display: none; } <div class="crypto-opt-container mt-md-5"> <label">Which Crypto would you like to Deposit with?</label> <div class="dropdown w-100"> <select class="form-select p-2 deposit-dropdown" aria-label="Default select example"> <option selected>Choose Crypto Option:</option> <option value="1">Bitcoin</option> <option value="2">Ethereum</option> <option value="3">USDT</option> </select> </div> </div> <div class="depo-add-container mt-md-5"> <label>Deposit Address:</label> <div class="d-flex flex-row justify-content-between"> <p class="mb-0 me-1 py-2 ps-4 add-text1" id="p1">ygwbfewilskfhnewisfklnewiofjfhjky</p> <p class="mb-0 me-1 py-2 ps-4 add-text2" id="p2">ygwbfewilskfhnewisfklnewiofjfhrrt</p> <p class="mb-0 me-1 py-2 ps-4 add-text3" id="p3">ygwbfewilskfhnewisfklnewiofewfygi</p> <button class="btn-primary w-20 px-3 copy-btn" onclick="copyToClipboard('#p1')">Copy<i class="fa-regular fa-copy ps-2"></i></button> </div> </div>necesita usar el evento onchange con javascript, algo como esto:
function change(selected) { document.querySelector('p.add-text' + selected.value).display = 'block' }y en html agregue para seleccionar onchange="change(this)" o agregue eventlistener con js
De esta manera...
const mySelect = document.querySelector('select[name="mySelect"]') , p1_p2_p3 = document.querySelectorAll('#p1,#p2,#p3') ; set_p1_p2_p3_on_mySelect() // on init page mySelect.onchange = set_p1_p2_p3_on_mySelect // for every change function set_p1_p2_p3_on_mySelect() { let sel_id = 'p' + mySelect.value p1_p2_p3.forEach( p => p.classList.toggle('noDisplay', p.id !== sel_id )) } .noDisplay { display: none; } <select name="mySelect" > <option selected>Choose Crypto Option:</option> <option value="1">Bitcoin</option> <option value="2">Ethereum</option> <option value="3">USDT</option> </select> <div> <p id="p1"> ygwbfewilskfhnewisfklnewiofjfhjky Bitcoin</p> <p id="p2"> ygwbfewilskfhnewisfklnewiofjfhrrt Ethereum </p> <p id="p3"> ygwbfewilskfhnewisfklnewiofewfygi USDT </p> </div>