有没有办法发布 html 表单选项的值和内容？答案

【问题标题】：Is there a way to POST the value and the content of html form option?有没有办法发布 html 表单选项的值和内容？
【发布时间】：2022-01-07 23:05:31
【问题描述】：

我有一个使用动态下拉列表来选择选项的表单。我正在使用 PHP 从我的数据库中提取数据。

我正在寻找一种同时发送选项值（bunker_id）和内容（bunker_name）的方法。

我对编码很陌生，并且看过一些教程。 Tutorial 1

我有点失落。我以为这会让我在我的操作页面中使用 $bunker_name=$_POST['name'] 来获取内容，但是当我执行 echo($bunker_name) 时，页面上什么也没有出现。

有没有更好的方法来获得价值和内容？

bunker_id = {1,2,3,...} 地堡名称 = {地堡 K1、地堡 T2、地堡 X、...}

<label for="bunker_id">Bunker</label>
        <select name="bunker_id" id="bunker_id" required>
        <option value="%" bunk_name="All">All</option>
        <?php
            while($data=mysqli_fetch_array($result_bunker)){
                echo "<option value='".$data['bunker_id']."' bunk_name='".$data['bunker_name']."'>".$data['bunker_name']."</option>";
            }
        ?>
        <input type="hidden" id="name" name="name" value=""/>
        </select>

$(function() {
            $(#bunker_id).change(function(){
                var bunkerName =$('option:selected', this).attr('bunk_name');
                $('#name').val(bunkerName);
            });
        });

【问题讨论】：

$(#bunker_id) 应该是 $('#bunker_id')（用引号引起来）。检查是否效果更好。 旁注： 作为一种好的做法，请使用data 属性而不是自己编写：data-bunk_name='". $data['bunk_name'] . "'，然后使用：.data('bunk_name') 来获取它。

标签： javascript php html forms

【解决方案1】：

这是我的解决方案...

$(function() {
    // Trigger event when #bunker_id on change
    $("#bunker_id").on('change', function(){
        // get bunker name from selected option
        var bunkerName = $(this).find(':selected').data('bunker');
        // get bunker id from selected option
        var bunkerId = $(this).val();
        // result
        console.log(`Bunker ID: ${bunkerId} | Bunker Name: ${bunkerName}`);
    });
});

<label for="bunker_id">Bunker</label>
<select name="bunker_id" id="bunker_id" required>
    <option value="%" data-bunker="All">All</option>
    <option value="1" data-bunker="Bunker 1">Bunker 1</option>
    <option value="2" data-bunker="Bunker 2">Bunker 2</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：