确认页面

Confirmation page

本文关键字：确认      更新时间：2023-09-26

我有10个下拉菜单，像:

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

我想抓住值，如果一个项目被选中，并打印在确认页上。我可以用for循环和javascript做到这一点吗?如果我这样做，在HTML中怎么调用呢?

    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++;
            }
        }
    }

下拉菜单是使用php从MySQL数据库填充的。我的HTML/php: 

Item 4&nbsp;&nbsp;&nbsp; 
            <select id="item4">
            <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>
                            <br>
                <?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>
                            <br>
                <?php } } ?>
            </select>
            <br>

您似乎生成了包含所有选项的单个下拉列表。如果这是有意的，那么让它成为一个可以进行多个选择的选项，这不是默认行为。为此，将multiple属性添加到select。

然后你需要为change事件添加一个监听器，这样你的代码就可以在用户选择或取消选择项目时执行。

注意，您在value属性之后忘记了一些=。此外，不允许在option元素之后放置<br>标记。select元素只能有option子元素。

下面是修改后的PHP:

Item 4&nbsp;&nbsp;&nbsp; 
<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>

相关文章：