如何使用 vanilla JavaScript 选择下拉选项？答案

【问题标题】：How can I select a dropdown option with vanilla JavaScript?如何使用 vanilla JavaScript 选择下拉选项？
【发布时间】：2020-07-26 18:19:30
【问题描述】：

我正在尝试使用 JavaScript 在下拉菜单中选择一个选项，但我似乎找不到任何方法。目标是在选择特定选项时显示特定输入字段。相反，如果未选择任何内容，则隐藏输入字段。

目前，当您选择一个选项时，没有任何反应。我为此使用香草 JavaScript，没有 jQuery。

const variableFee = document.getElementById('variableFee').value = "Variable";
const fixedFee = document.getElementById('fixedFee').value = "Fixed";
const feeChoice = document.getElementById('feeChoice');


// ---------------- Fixed VS Variable Fee Calculation ---------------- //
// ------------------------------------------------------------------- //
function transactionFeeInput() {
    if (feeChoice == variableFee) {
        variableFee.style.display = "block";
    }
}

#variableFeeInput, #fixedFeeInput {
    display: none;
}

<div id="transactionFeeSection">
                        <h3>What is the transaction fee?</h3>
                        <label for="feeChoice"></label>
                        <select name="feeChoice" id="feeChoice">
                            <option id="blankOption" selected="true" disabled="disabled">-- Select an Option --</option>
                            <option id="variableFee" value="variable">Variable</option>
                            <option id="fixedFee" value="fixed">Fixed</option>
                        </select>
                        <input id="variableFeeInput" type="number" placeholder="Enter Percentage - 0%">
                        <input id="fixedFeeInput" type="number" placeholder="Enter Amount - $0.00">
                    </div>

我没有看到任何控制台错误，所以我不确定要修复什么？

【问题讨论】：

标签： javascript html dropdown option

【解决方案1】：

应该出现的字段的 ID 为 variableFeeInput 和 fixedFeeInput，但您选择 variableFee 和 fixedFee（选项）并为它们分配值，然后放置这些值而不是元素本身在变量中。

不正确：

const variableFee = document.getElementById('variableFee').value = "Variable";

正确：

const variableFee = document.getElementById('variableFeeInput');

然后，在尝试检查选择了哪个选项时，您需要将下拉列表的 value 属性与您在 HTML 中设置的选项值进行比较。

不正确：

if (feeChoice == variableFee) {

正确：

if (feeChoice.value === 'variable') {

【讨论】：

【解决方案2】：

const variableFee = document.getElementById('variableFeeInput');
const fixedFee = document.getElementById('fixedFeeInput');
const feeChoice = document.getElementById('feeChoice');


// ---------------- Fixed VS Variable Fee Calculation ---------------- //
// ------------------------------------------------------------------- //
function transactionFeeInput() {
  
  
 
     
    if (feeChoice.value == 'variable') {
    
   
        variableFee.style.display = "inline-block";
        fixedFee.style.display = "none";
    }else{
    
        fixedFee.style.display = "inline-block";
        variableFee.style.display = "none";
    
}}

#variableFeeInput, #fixedFeeInput {
    display: none;
}

<div id="transactionFeeSection">
                        <h3>What is the transaction fee?</h3>
                        <label for="feeChoice"></label>
                        <select name="feeChoice" id="feeChoice" onchange="transactionFeeInput()">
                            <option id="blankOption" selected="true" disabled="disabled">-- Select an Option --</option>
                            <option id="variableFee" value="variable">Variable</option>
                            <option id="fixedFee" value="fixed">Fixed</option>
                        </select>
                        <input id="variableFeeInput" type="number" placeholder="Enter Percentage - 0%">
                        <input id="fixedFeeInput" type="number" placeholder="Enter Amount - $0.00">
                    </div>

【讨论】：

【解决方案3】：

你很接近;)，但正如其他人指出的那样，你的 javascript id 和引用存在一些问题（HTML 和 CSS 都很好）。您也不需要常量声明——HTML 元素已经在文档对象模型 (DOM) 中，并且可以通过 id 引用：

// ---------------- Fixed VS Variable Fee Calculation ---------------- //
// ------------------------------------------------------------------- //
function transactionFeeInput() {
    if (feeChoice.value === "variable") { // check for selected value
        variableFeeInput.style.display = "block";
    }
}

https://jsfiddle.net/hectorjrivas/3xawqp6L/10/

【讨论】：

【解决方案4】：

我认为你做错的唯一一件事是用大写字母写“变量”和“固定”，而你在选项中的值是“变量”和“固定”。

编辑：或者，您正在使用选项设置值！尝试做 document.querySelector('#feeChoice').value = "fixed"

【讨论】：

【解决方案5】：



    const variableFee = document.getElementById('variableFee').value = "Variable";
    const fixedFee = document.getElementById('fixedFee').value = "Fixed";
    const feeChoice = document.getElementById('feeChoice');


    // ---------------- Fixed VS Variable Fee Calculation ---------------- //
    // ------------------------------------------------------------------- //
    function transactionFeeInput() {
//you need to get the value of feeChoice
        if (feeChoice.value  == variableFee) {
            variableFee.style.display = "block";
        }
    }
    #variableFeeInput, #fixedFeeInput {
        display: none;
    }
    <div id="transactionFeeSection">
                            <h3>What is the transaction fee?</h3>
                            <label for="feeChoice"></label>
                            <select name="feeChoice" id="feeChoice">
<!-- Default value should be "" -->
                                <option id="blankOption" value="" selected="true" disabled="disabled">-- Select an Option --</option>
                                <option id="variableFee" value="variable">Variable</option>
                                <option id="fixedFee" value="fixed">Fixed</option>
                            </select>
                            <input id="variableFeeInput" type="number" placeholder="Enter Percentage - 0%">
                            <input id="fixedFeeInput" type="number" placeholder="Enter Amount - $0.00">
                        </div>

【讨论】：