javascript - 获取上面所选选项的值

Question

我正在尝试制作一个订单页面以通过javascript添加多个产品。 PHP/HTML 代码是:

<?php $module_row = 0; ?>
    <tbody id="module-row<?php echo $module_row; ?>">
    <tr>
    <td><select name="prod[]"><?php foreach ($products as $product) { ?><option value="<?php echo $product['ID']; ?>"><?php echo $product['name']; ?></option></td><td><a onClick="addProd();">Add New</a></td>
    </tr></tbody>
<?php $module_row++; ?>

我的 Javascript 代码是:

        var module_row = <?php echo $module_row; ?>;
        function addProd() {    
            html  = '<tbody id="module-row' + module_row + '">';
            html += '  <tr>';
            html += '    <td class="left"><select name="prod[]">';
            <?php foreach ($products as $product) { ?>
            html += '      <option value="<?php echo $product['ID']; ?>"><?php echo $product['name']; ?></option>';
            <?php } ?>
            html += '    </select></td></tr></tbody>';
$('#module tfoot').before(html);
    module_row++;

现在我想在稍后添加的行中显示产品数组，以显示产品下拉列表，而不显示上面选择的产品。我检查了很多论坛，但找不到解决方案来获取上述下拉列表的选定值。对此有什么想法吗？

Answer 1

对于启用和禁用选择选项，this JS fiddle 之类的东西可能会有所帮助。请注意，它禁用了在多个选择框中选择相同内容的可能性。

对于您发布的代码示例，您在 foreach 之后缺少 PHP 右括号 ( } )。

此外，您还可以使用 <?= $var ?> 作为 <?php echo $var ?> 的更易读的快捷方式

试试这个:

<?php

$products = [
    [
        'ID' => 123,
        'name' => 'product1',
    ],
    [
        'ID' => 456,
        'name' => 'product2',
    ],
];

$module_row = 0;

?>

<tbody id="module-row <?= $module_row; ?>">
    <tr>
        <td>
            <select name="prod[]">
                <?php foreach ($products as $product) { ?>
                <option value="<?= $product['ID']; ?>">
                    <?= $product['name']; ?>
                </option>
                <?php } ?>
        </td>
        <td>
            <a onClick="addProd();">Add New</a>]
        </td>
    </tr>
</tbody>

<?php $module_row++; ?>