如何仅使用 Javascript 创建动态下拉框？答案

【问题标题】：How do I create a dynamic drop down box with just Javascript?如何仅使用 Javascript 创建动态下拉框？
【发布时间】：2020-11-19 12:40:14
【问题描述】：

我正在尝试使用允许用户选择特定温度单位的下拉列表创建温度转换器。从下拉列表中选择单位时，我希望输入栏发生变化，以便显示相同的单位。选择单元后，前一个单元应向下移动到结果区域。

显示选定的选项和输入栏

显示华氏度的转换

// Listen for submit
document.querySelector('#temp-form').addEventListener('submit', function(e) {
  // Hide results
  document.querySelector('#results').style.display = 'none';

  // Show loader
  document.querySelector('#loading').style.display = 'block';

  setTimeout(calculateResults, 2000);
  
  e.preventDefault();
});

// Calculate Results
function calculateResults(e){
  console.log('Calculating...');
  // UI Vars
  const fahrenheitInput = document.querySelector('#fahrenheit');
  const celsiusInput = document.querySelector('#celsius');
  const rankineInput = document.querySelector('#rankine');
  const kelvinInput = document.querySelector('#kelvin');

  function fahrenheitConversion() {
    const ftemp = parseFloat(fahrenheitInput.value);
    const ctemp = (ftemp - 32) * (5/9);
    const rtemp = ftemp + 459.67;
    const ktemp = (ftemp - 32) * (5/9) + 273.15;
    
    celsiusInput.value = ctemp.toFixed(2);
    rankineInput.value = rtemp.toFixed(2);
    kelvinInput.value = ktemp.toFixed(2);
  }

  // function celsiusConversion() {
  //   const ctemp = parseFloat(celsiusInput.value);
  //   const ftemp = (ctemp * (9/5)) + 32;
  //   const rtemp = (ctemp * (9/5)) + 491.67;
  //   const ktemp = ctemp + 273.15;
    
  //   fahrenheitInput.value = ftemp.toFixed(2);
  //   rankineInput.value = rtemp.toFixed(2);
  //   kelvinInput.value = ktemp.toFixed(2);
  // }

  // function rankineConversion() {
  //   const rtemp = parseFloat(rankineInput.value);
  //   const ctemp = (rtemp - 491.67) * (5/9);
  //   const ftemp = rtemp - 459.67;
  //   const ktemp = rtemp * (5/9);
    
  //   celsiusInput.value = ctemp.toFixed(2);
  //   fahrenheitInput.value = ftemp.toFixed(2);
  //   kelvinInput.value = ktemp.toFixed(2);
  // }

  // function kelvinConversion() {
  //   const ktemp = parseFloat(kelvinInput.value);
  //   const ctemp = ktemp - 273.15;
  //   const rtemp = ktemp * (9/5);
  //   const ftemp = (ktemp - 273.15) * (9/5) + 32;
    
  //   celsiusInput.value = ctemp.toFixed(2);
  //   rankineInput.value = rtemp.toFixed(2);
  //   fahrenheitInput.value = ftemp.toFixed(2);
  // }
  
  // Show results
  document.querySelector('#results').style.display = 'block';

  // Hide loader
  document.querySelector('#loading').style.display = 'none';

  fahrenheitInput.addEventListener('submit', fahrenheitConversion());
  // celsiusInput.addEventListener('submit', celsiusConversion());
  // rankineInput.addEventListener('submit', rankineConversion());
  // kelvinInput.addEventListener('submit', kelvinConversion());
}

<body class="bg-light">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <div class="card card-body text-center mt-5">
          <h1 class="heading display-5 pb-3">Temperature Converter</h1>
          <form id="temp-form">
            <div class="form-group">
              <label>Select Temperature Unit</label>
              <select name="" id="units" class="form-control">
                <option value="ftemp" class="fval">Fahrenheit</option>
                <option value="ctemp" class="cval">Celsius</option>
                <option value="rtemp" class="rval">Rankine</option>
                <option value="ktemp" class="kval">Kelvin</option>
              </select>
            </div>
            <div class="form-group transform">
              <div class="input-group-prepend">
                <span class="input-group-text">&deg;F</span>
                <input type="number" class="form-control" id="fahrenheit" placeholder="Degrees Fahrenheit">
              </div>
            </div>
            <div class="form-group">
              <input type="submit" value="Calculate" class="btn btn-dark btn-block">
            </div>
          </form>
          <!-- LOADER -->
          <div id="loading">
            <img src="img/loading.gif" alt="">
          </div>
          <!-- RESULTS -->
          <div id="results" class="pt-4">
            <h5>Results</h5>
            <div class="form-group">
              <div class="input-group-prepend">
                <span class="input-group-text">&deg;C</span>
                <input type="number" class="form-control" id="celsius" placeholder="Degrees Celsius" disabled>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group-prepend">
                <span class="input-group-text">&deg;R</span>
                <input type="number" class="form-control" id="rankine" placeholder="Degrees Rankine" disabled>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group-prepend">
                <span class="input-group-text">K</span>
                <input type="number" class="form-control" id="kelvin" placeholder="Kelvin" disabled>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>

【问题讨论】：

你的意思是当用户从下拉框中选择一个单元时，其他单元会转到结果区域？如果是这样，帖子标题可能会产生误导。

标签： javascript html

【解决方案1】：

如果我正确理解您的问题，那么您想将输入框之前的°F 更改为下拉菜单中的输入，因此当单位更改时，摄氏度为°C。如果是这种情况，那么你需要的代码真的很简单：只是一个事件监听器来检查单元何时切换，然后是一个切换循环来动态更改输入框的标签：

 $("#units").change(function () {
    var unit = this.find(":selected").text();
    switch (unit) {
        case "Fahrenheit":
            $(".input-group-text").text("&deg;F");
            break
        case "Celsius":
            $(".input-group-text").text("&deg;C");
            break;
        case "Rankine":
            $(".input-group-text").text("&deg;R");
            break;
        case "Kelvin":
            $(".input-group-text").text("&deg;K");
            break;
        default:
            // You Do Not Have An Empty Option, But If You Did, It Would Go Here
    }
});

【讨论】：

【解决方案2】：

要按所选单位更改度数，可以更改文本。选择摄氏度时，输入组文本和输入占位符会在切换功能中更改。如果需要，可以选择更改计算函数。

const units = document.querySelector('#units');

units.addEventListener('change', function(e) {  
  let selectedUnit = units.selectedIndex;
  let degree = document.querySelector('#degree');  
        
  switch(selectedUnit) {
    case 0:
    degree.innerHTML = "&deg;F";
    document.getElementById('tag1').innerHTML = "&deg;C";
    document.getElementById('tag2').innerHTML = "&deg;R";
    document.getElementById('tag3').innerHTML = "&deg;K";
    document.getElementById('fahrenheit').placeholder = "Degrees fahrenheit";        
    break;
    case 1:
    degree.innerHTML = "&deg;C";    
    document.getElementById('tag1').innerHTML = "&deg;K";
    document.getElementById('tag2').innerHTML = "&deg;R";
    document.getElementById('tag3').innerHTML = "&deg;F";
    document.getElementById('fahrenheit').placeholder = "Degrees Celsius";
    break;
    case 2:
    degree.innerHTML = "&deg;R";    
    document.getElementById('tag1').innerHTML = "&deg;C";
    document.getElementById('tag2').innerHTML = "&deg;K";
    document.getElementById('tag3').innerHTML = "&deg;F";
    document.getElementById('fahrenheit').placeholder = "Degrees Rankine";
    break;
    case 3:    
    degree.innerHTML = "&deg;K";        
    document.getElementById('tag1').innerHTML = "&deg;C"
    document.getElementById('tag2').innerHTML = "&deg;R"
    document.getElementById('tag3').innerHTML = "&deg;F";
    document.getElementById('fahrenheit').placeholder = "Kelvin";
    break;
    default:
    degree.innerHTML = "&deg;F";
    document.getElementById('fahrenheit').placeholder = "Degrees fahrenheit";
    break;
  }
  
  
});

// Listen for submit
document.querySelector('#temp-form').addEventListener('submit', function(e) {
  // Hide results
  document.querySelector('#results').style.display = 'none';

  // Show loader
  document.querySelector('#loading').style.display = 'block';

  setTimeout(calculateResults, 2000);
  
  e.preventDefault();
});

// Calculate Results
function calculateResults(e){
  console.log('Calculating...');
  // UI Vars
  const fahrenheitInput = document.querySelector('#fahrenheit');
  const celsiusInput = document.querySelector('#celsius');
  const rankineInput = document.querySelector('#rankine');
  const kelvinInput = document.querySelector('#kelvin');

  function fahrenheitConversion() {
    const ftemp = parseFloat(fahrenheitInput.value);
    const ctemp = (ftemp - 32) * (5/9);
    const rtemp = ftemp + 459.67;
    const ktemp = (ftemp - 32) * (5/9) + 273.15;
    
    celsiusInput.value = ctemp.toFixed(2);
    rankineInput.value = rtemp.toFixed(2);
    kelvinInput.value = ktemp.toFixed(2);
  }

  // function celsiusConversion() {
  //   const ctemp = parseFloat(celsiusInput.value);
  //   const ftemp = (ctemp * (9/5)) + 32;
  //   const rtemp = (ctemp * (9/5)) + 491.67;
  //   const ktemp = ctemp + 273.15;
    
  //   fahrenheitInput.value = ftemp.toFixed(2);
  //   rankineInput.value = rtemp.toFixed(2);
  //   kelvinInput.value = ktemp.toFixed(2);
  // }

  // function rankineConversion() {
  //   const rtemp = parseFloat(rankineInput.value);
  //   const ctemp = (rtemp - 491.67) * (5/9);
  //   const ftemp = rtemp - 459.67;
  //   const ktemp = rtemp * (5/9);
    
  //   celsiusInput.value = ctemp.toFixed(2);
  //   fahrenheitInput.value = ftemp.toFixed(2);
  //   kelvinInput.value = ktemp.toFixed(2);
  // }

  // function kelvinConversion() {
  //   const ktemp = parseFloat(kelvinInput.value);
  //   const ctemp = ktemp - 273.15;
  //   const rtemp = ktemp * (9/5);
  //   const ftemp = (ktemp - 273.15) * (9/5) + 32;
    
  //   celsiusInput.value = ctemp.toFixed(2);
  //   rankineInput.value = rtemp.toFixed(2);
  //   fahrenheitInput.value = ftemp.toFixed(2);
  // }
  
  // Show results
  document.querySelector('#results').style.display = 'block';

  // Hide loader
  document.querySelector('#loading').style.display = 'none';

  fahrenheitInput.addEventListener('submit', fahrenheitConversion());
  // celsiusInput.addEventListener('submit', celsiusConversion());
  // rankineInput.addEventListener('submit', rankineConversion());
  // kelvinInput.addEventListener('submit', kelvinConversion());
}

<body class="bg-light">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <div class="card card-body text-center mt-5">
        
          <h1 class="heading display-5 pb-3">Temperature Converter</h1>
          
          <form id="temp-form">
            <div class="form-group">
              <label>Select Temperature Unit</label>
              <select name="" id="units" class="form-control">
                <option value="ftemp" class="fval">Fahrenheit</option>
                <option value="ctemp" class="cval">Celsius</option>
                <option value="rtemp" class="rval">Rankine</option>
                <option value="ktemp" class="kval">Kelvin</option>
              </select>
            </div>
            <div class="form-group transform">
              <div class="input-group-prepend">
                <span class="input-group-text" id='degree'>&deg;F</span>
                <input type="number" class="form-control" id="fahrenheit" placeholder="Degrees Fahrenheit">
              </div>
            </div>
            <div class="form-group">
              <input type="submit" value="Calculate" class="btn btn-dark btn-block">
            </div>
          </form>
          
          <!-- LOADER -->
          <div id="loading">
            <img src="img/loading.gif" alt="">
          </div>
          <!-- RESULTS -->
          <div id="results" class="pt-4">
            <h5>Results</h5>
            <div class="form-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="tag1">&deg;C</span>
                <input type="number" class="form-control" id="celsius" placeholder="Degrees Celsius" disabled>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="tag2">&deg;R</span>
                <input type="number" class="form-control" id="rankine" placeholder="Degrees Rankine" disabled>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group-prepend" >
                <span class="input-group-text" id="tag3">K</span>
                <input type="number" class="form-control" id="kelvin" placeholder="Kelvin" disabled>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>

【讨论】：

感谢您的帮助！如何更改我的计算函数以适应所选单位？
@Zanto 不客气！将 addEventListener 和 removeEventListener 放入 switch 函数会很有帮助！这些 switch 函数看起来很乱，但是长代码也可以用函数缩短。