<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;
}
EXPLANATION:
I want the p.add-text(1,2 and 3) to toggle display from none to block according to which option the user clicks such that if <option value="1">Bitcoin</option> is clicked then this <p class="mb-0 me-1 py-2 ps-4 add-text1" id="p1">ygwbfewilskfhnewisfklnewiofjfhjky</p> will be display: block and so on.
In essence, option values= "1,2,3" should only display p.add-text1,2,3 respectively.
Javascript only answers please!!!
This will surely help you :)
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>you need to use onchange event with javascript, something like this:
function change(selected) {
document.querySelector('p.add-text' + selected.value).display = 'block'
}
and in html add to select onchange="change(this)" or add eventlistener with js
This way...
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>