有没有办法 POST html 表单选项的值和内容？

Question

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

我正在寻找一种方法来发送选项值 (bunker_id) 以及内容 (bunker_name)。

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

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

是否有更好的方式同时获得价值和内容？

bunker_id = {1,2,3,...} bunker_name = {地堡 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);
            });
        });

Answer 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>

有没有办法 POST html 表单选项的值和内容？

Is there a way to POST the value and the content of html form option?

html

javascript

php

forms