如何仅使用 Javascript 创建动态下拉框？
[英]How do I create a dynamic drop down box with just Javascript?
问题描述
I'm trying to create a temperature converter with a drop down list that allows the user to select a specific temperature unit.
我正在尝试创建一个带有下拉列表的温度转换器，允许用户选择特定的温度单位。 When the unit is selected from the drop down list I want the input bar to change so that it displays the same units.当从下拉列表中选择单位时，我希望输入栏发生变化，以便显示相同的单位。 Once the unit is selected the previous unit should move down to the results area.选择单位后，前一个单位应向下移动到结果区域。
Shows selected option and input bar显示选定的选项和输入栏
Shows conversions from Fahrenheit显示华氏度的转换
// 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">°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">°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">°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>
2 个解决方案
解决方案1
0 2020-11-19 02:44:36
if I understand your question correctly, then you want to change the °F before your input box to whatever the input in the dropdown is, so °C for Celcius when the unit is changed.如果我正确理解了您的问题，那么您想将输入框之前的°F 更改为下拉列表中的任何输入，因此当单位更改时，Celcius 为°C。 If this is the case, then the code you need is really rather simple: Just an event listener to check when the unit switches, followed by a switch loop to dynamically change the label by the input box:如果是这种情况，那么您需要的代码确实相当简单：只需一个事件侦听器来检查单元何时切换，然后是一个切换循环，通过输入框动态更改标签：
$("#units").change(function () {
var unit = this.find(":selected").text();
switch (unit) {
case "Fahrenheit":
$(".input-group-text").text("°F");
break
case "Celsius":
$(".input-group-text").text("°C");
break;
case "Rankine":
$(".input-group-text").text("°R");
break;
case "Kelvin":
$(".input-group-text").text("°K");
break;
default:
// You Do Not Have An Empty Option, But If You Did, It Would Go Here
}
});
解决方案2
0 2020-11-19 04:40:14
To change degrees by the selected unit, texts can be changed.要按所选单位更改度数，可以更改文本。 When selecting Celsius then input group texts and input placeholder are changed in switch function.选择Celsius然后输入组文本和输入占位符在交换机功能中更改。 Calculating functions could be changed by selecting if you want.如果需要，可以通过选择来更改计算功能。
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 = "°F"; document.getElementById('tag1').innerHTML = "°C"; document.getElementById('tag2').innerHTML = "°R"; document.getElementById('tag3').innerHTML = "°K"; document.getElementById('fahrenheit').placeholder = "Degrees fahrenheit"; break; case 1: degree.innerHTML = "°C"; document.getElementById('tag1').innerHTML = "°K"; document.getElementById('tag2').innerHTML = "°R"; document.getElementById('tag3').innerHTML = "°F"; document.getElementById('fahrenheit').placeholder = "Degrees Celsius"; break; case 2: degree.innerHTML = "°R"; document.getElementById('tag1').innerHTML = "°C"; document.getElementById('tag2').innerHTML = "°K"; document.getElementById('tag3').innerHTML = "°F"; document.getElementById('fahrenheit').placeholder = "Degrees Rankine"; break; case 3: degree.innerHTML = "°K"; document.getElementById('tag1').innerHTML = "°C" document.getElementById('tag2').innerHTML = "°R" document.getElementById('tag3').innerHTML = "°F"; document.getElementById('fahrenheit').placeholder = "Kelvin"; break; default: degree.innerHTML = "°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'>°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">°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">°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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
创建动态下拉框 - Create dynamic drop down box
如何使用 JavaScript 制作动态下拉菜单 - How do I make a dynamic drop down menu using JavaScript
如何根据前一个下拉列表和最终选择显示文本框创建下拉列表 - How do I create a drop down list dependant on previous drop down and final choice displays text box
如何在javascript中创建objectArray以便基于另一个下拉列表获取下拉列表的值 - how do i create an objectArray in javascript for fetching values for a drop down based on another drop down
rails：如何在rails中创建动态下拉框？ - rails:how to create dynamic drop-down box in rails?
Javascript：动态下拉框更新 - Javascript: dynamic drop down box update
如何创建此下拉框 - How to create this drop down box
如何在php中创建动态下拉框？ - how can i make a dynamic drop down box in php?
如何根据另一个下拉框在下拉框中创建列表？ - How do I make a list in a drop down box depending on another drop down box?
如何在JavaScript / jQuery中创建动态SELECT下拉列表？ - How to create a dynamic SELECT drop-down list in JavaScript/jQuery?
相关标签