有沒有辦法發布 html 表單選項的值和內容？

Question

我有一個使用動態下拉列表來選擇選項的表單。 我正在使用 PHP 從我的數據庫中提取數據。

我正在尋找一種同時發送選項值（bunker_id）和內容（bunker_name）的方法。

我對編碼很陌生，並且看過一些教程。 教程 1

我有點失落。 我認為這會讓我在我的操作頁面中使用 $bunker_name=$_POST['name'] 來獲取內容，但是當我執行 echo($bunker_name) 時，頁面上什么也沒有出現。

有沒有更好的方法來獲得價值和內容？

bunker_id = {1,2,3,...} bunker_name = {Bunker K1, Bunker T2, Bunker 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>