如何在单击 select 选项时更改显示类

Question

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

解释：

我希望 p.add-文本（1,2 和 3）将显示从 none 切换到 block 根据用户点击 option 这样如果 <option value="1">Bitcoin</option> 被点击，那么这个 <p class="mb-0 me-1 py-2 ps-4 add-text1" id="p1">ygwbfewilskfhnewisfklnewiofjfhjky</p> 将是 display: block 等等。

本质上，option values= "1,2,3"应该只分别显示p.add-text1,2,3。

Javascript只求回答！！！

Answer 1

您需要将 onchange 事件与 javascript 一起使用，如下所示：

function change(selected) {
  document.querySelector('p.add-text' + selected.value).display = 'block'
}

并在 html 添加到 select onchange="change(this)" 或使用 js 添加 eventlistener

Answer 2

这一定会对你有所帮助:)

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>

Answer 3

这边...

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>

如何在单击 select 选项时更改显示类

how to change display classes on click of select options

html

javascript

frontend

toggle

如何在单击 select 选项时更改显示 类

how to change display classes on click of select options

html

javascript

frontend

toggle

如何在单击 select 选项时更改显示类