确认页面

Question

我有10个下拉菜单，如：

Obj is instantiated recursively

如果选择了某个项目，我想获取该值并将其打印在确认页面上。我可以用for循环和javascript做到这一点吗？就像我这样做，我怎么称它为HTML？

Please Select
    Item 1
    Item 2
    Item 3
---Appetizers---
    Item 4
    Item 5
---Main Courses---
    Item 6
    Item 7
---Lunch Specials---
    Item 8

使用php从MySQL数据库填充下拉列表。我的HTML / php：

    function getItems() {
        var items = [
            document.getElementById("item1").value, 
            document.getElementById("item2").value,
            document.getElementById("item3").value,
            document.getElementById("item4").value,
            document.getElementById("item5").value,
            document.getElementById("item6").value,
            document.getElementById("item7").value,
            document.getElementById("item8").value,
            document.getElementById("item9").value,
            document.getElementById("item10").value
        ];

        for (int i = 0; i < items.length; i++) {
            var count = 0;
            if (
                (item[i] != "Please Select") || 
                (item[i] != "---Appetizers---") || 
                (item[i] != "---Main Courses---") || 
                (item[i] != "---Lunch Specials---")
                ) {
                    document.getElementById(i).innerHTML = item[i];
                    count++;
            }
        }
    }

Answer 1

您似乎使用所有选项生成一个下拉列表。如果是这样，那么将其设置为可以进行多项选择，这不是默认行为。为此，请将multiple属性添加到select。

然后，您需要为change事件添加一个侦听器，以便在用户选择或取消选择项目时执行代码。

请注意，您已在=属性后忘记了一些value。此外，不允许在<br>元素后面添加option标记。 select元素应该只包含option子元素。

以下是更正后的PHP的外观：

Item 4    
<select id="item4" multiple size="8">
    <option value="">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
    <option value="">---Appetizers---</option>               
    <?php while($row = $resultApp4->fetch_assoc()) { ?>
        <option value="<?php echo $row['price']; ?>">
            <?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
    <?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
    <option value="">---Main Courses---</option>                 
    <?php while($row = $resultMain4->fetch_assoc()) { ?>
        <option value="<?php echo $row['price']; ?>">
            <?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
    <?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
    <option value="">---Lunch Specials---</option> 
    <?php while($row = $result4->fetch_assoc()) { ?>
        <option value="<?php echo $row['price']; ?>">
            <?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
    <?php } } ?>
</select>

JavaScript可以更加简单，就像在这个工作片段中一样：

// Listen to the selection changes made:
document.querySelector('#item4').addEventListener('change', function () {
    // For this demo, the text is stored in a DIV
    document.getElementById('output').textContent = 
        [...this.selectedOptions] // convert selected options list to array
            .filter ( option => option.value.length ) // option must have a value
            .map( option => option.textContent ) // get text of option
            .join('\n'); // add line breaks
});

Item 4 (hold Ctrl key to add selections)<br>
<select id="item4" multiple size=8>
    <option value="">Please Select</option>
    <option value="">---Appetizers---</option>               
    <option value="1">drink 1 - $1</option>
    <option value="1.10">drink 2 - $1.10</option>
    <option value="">---Main Courses---</option>                 
    <option value="15">dish 1 - $15</option>
    <option value="16">dish 2 - $16</option>
    <option value="">---Lunch Secials---</option>                 
    <option value="10">lunch 1 - $10</option>
    <option value="11">lunch 2 - $11</option>
</select>
<div id="output" style="white-space:pre"></div>