Question

我有一个带有四个下拉菜单的屏幕。每个下拉列表都有选项。根据选择，我希望文本“说明”显示在屏幕上。

下拉/选项：

碳水化合物->大米（RI）（默认选择）/面包（BR）
蛋白质->鸡肉（C）（默认选中）
脂肪->（无）/黄油（BT）/橄榄油（OI）
水果->（无）/苹果（AP）/橙色（OR）

当前，我所有的选项都有一个来自表的“代码”，该表可以正确显示，但描述性不强。例如，如果我选择大米，鸡肉，无和苹果，则屏幕显示：

碳水化合物：RI
蛋白质：C
脂肪：
水果：美联社

我要根据所选选项显示说明：

碳水化合物：RI-大米
蛋白质：C-鸡肉
脂肪：
水果：美联社-苹果

我正在努力显示所选选项（不基于所选选项的描述）的相关代码是：

<script>
    function initializeForm() {}
</script>

<body class="Outside" style="background-color:black;" onload="initializeForm();" onkeyup="forminput(event);">
    <center>

        <table class="Inside" style="height:435px; width:535px;">
            <tr class="mainTop">
                <th style="height:22px;">Food&nbsp;Menu&nbspOptions</th>
            </tr>
            <tr>
                <td align="center" valign="middle">
                    <span style="clear:both;color:darkred; font-weight:bold;">Please Confirm Your Selected Options:<br />&nbsp;<br /></span>

                    <div style="float:left; width:28%; text-align:right;">Carbs:&nbsp;&nbsp;</div>
                    <div style="float:left; width:24%; text-align:left; border-bottom:1px solid black;">&nbsp;(option1)</div>
                    <div style="float:left; width:3%;">&nbsp;</div>
                    <div style="float:left; width:13%; text-align:right;">Protein:&nbsp;&nbsp;</div>
                    <div style="float:left; width:24%; text-align:left; border-bottom:1px solid black;">&nbsp;(option2)</div>
                    <div style="float:left; width:3%;">&nbsp;</div>
                    <div style="float:left; width:28%; text-align:right;">Fat:&nbsp;&nbsp;</div>
                    <div style="float:left; width:24%; text-align:left; border-bottom:1px solid black;">&nbsp;(option3)</div>
                    <div style="float:left; width:3%;">&nbsp;</div>
                    <div style="float:left; width:13%; text-align:right;">Fruit:&nbsp;&nbsp;</div>
                    <div style="float:left; width:24%; text-align:left; border-bottom:1px solid black;">&nbsp;(option4)</div>
                    <div style="float:left; width:3%;">&nbsp;</div>
                    <div style="clear:both;">&nbsp;</div>
                </td>
            </tr>
            <tr class="mainBottom">
                <th style="height:20px;">&nbsp;</th>
            </tr>
        </table>
    </center>
</body>

我想学习如何使用函数中的switch语句（在initializeForm函数中？）以及各个下拉列表的div ID / getelementbyID来做到这一点。

我是JS / HTML的初学者，因此给您带来的困惑我深表歉意。只是想弄清楚-谢谢！

Answer 1

如果您确实想使用<div>进行操作，则可以执行以下操作。但是，下面的代码仅使用大量代码实现了<select>标签的一小部分功能。同样，使用<div>来实现像your这样的表单也不是一个好习惯，因为它会妨碍可访问性。您可以使用简单的<select>

var inputDataFromUser = {
    protein: '',
};

function toggleDropdown() {
    var optionsDiv = this.querySelector('.option-mock');

    optionsDiv.classList.contains('hidden')
        ? optionsDiv.classList.remove('hidden')
        : optionsDiv.classList.add('hidden');
}

function closeDropdown() {
    var optionsDiv = this.querySelector('.option-mock');

    optionsDiv.classList.add('hidden');
}

function selectValue(name) {
    var value = this.textContent;
    var displayValueContainer = this.parentNode.previousElementSibling.children[0];

    displayValueContainer.textContent = value;
    inputDataFromUser[name] = value;
}

function logValueFromSelect() {
    var select = document.querySelector('select');

    console.log(select.value);
}

.select-mock {
    position: relative;
}

.select-mock > div:nth-of-type(2) {
    position: absolute;
    border: 1px solid cornflowerblue;
    width: 100%;
}

.select-triangle {
    position: absolute;
    right: 0;
}

.option-mock > div {
    padding: 0 10px;
    background: white;
}

.option-mock > div:hover {
    color: white;
    background: cornflowerblue;
}

.no-user-select {
    user-select: none;
}

.hidden {
    display: none;
}

<center>
    <table class="Inside" style="height:100px; width:535px;">
        <tr>
            <td align="center" valign="middle">
                <div style="float:left; width:13%; text-align:right;">Protein:&nbsp;&nbsp;</div>
                <div
                    style="float:left; width:24%; text-align:left; border-bottom:1px solid black;"
                    class="select-mock no-user-select"
                    tabindex="0"
                    onclick="toggleDropdown.call(this)"
                    onblur="closeDropdown.call(this)"
                >
                    <div>
                        <span>&nbsp;(option2)</span>
                        <span class="select-triangle">&#9662;</span>
                    </div>
                    <div class="option-mock hidden">
                        <div onclick="selectValue.call(this, 'protein')">None</div>
                        <div onclick="selectValue.call(this, 'protein')">BT - Butter</div>
                        <div onclick="selectValue.call(this, 'protein')">OI - Olive Oil</div>
                    </div>
                </div>

                <!-- Or you could just do it like this, much simpler -->
                <select>
                    <option value="">None</option>
                    <option value="BT - Butter">BT - Butter</option>
                    <option value="OI - Olive Oil">OI - Olive Oil</option>
                </select>
                <!-- Or you could just do it like this, much simpler -->
            </td>
        </tr>
    </table>

    <button onclick="console.log(inputDataFromUser)">Click (value from div)</button>
    <button onclick="logValueFromSelect()">Click (value from select)</button>
</center>

使用基于下拉选择的切换案例更新屏幕上的文本

1 个答案: