如何仅使用 Javascript 创建动态下拉框？
[英]How do I create a dynamic drop down box with just Javascript?
问题描述
我正在尝试创建一个带有下拉列表的温度转换器，允许用户选择特定的温度单位。 当从下拉列表中选择单位时，我希望输入栏发生变化，以便显示相同的单位。 选择单位后，前一个单位应向下移动到结果区域。
显示选定的选项和输入栏
显示华氏度的转换
// 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
如果我正确理解了您的问题，那么您想将输入框之前的°F 更改为下拉列表中的任何输入，因此当单位更改时，Celcius 为°C。 如果是这种情况，那么您需要的代码确实相当简单：只需一个事件侦听器来检查单元何时切换，然后是一个切换循环，通过输入框动态更改标签：
$("#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
要按所选单位更改度数，可以更改文本。 选择Celsius然后输入组文本和输入占位符在交换机功能中更改。 如果需要，可以通过选择来更改计算功能。
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>
如何根据前一个下拉列表和最终选择显示文本框创建下拉列表
[英]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
如何在JavaScript / jQuery中创建动态SELECT下拉列表？
[英]How to create a dynamic SELECT drop-down list in JavaScript/jQuery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.