jQuery 獲取 innerHTML 動態插入的 Select 選中值傳遞給 PHP

場景還原

頁面通過 AJAX 獲取 HTML 片段，用 innerHTML 動態注入 <select id="txtHintPrice">。用戶在兌換碼輸入框失焦時，需讀取該 Select 當前選中的文本/值，與原價計算後顯示最終價格。

核心難點

動態插入的 DOM 元素綁定事件、取值需注意時機與選擇器精確性，否則易獲取到空值或舊值。

解決方案：事件委託 + 精確選擇器

1. HTML 結構參考

<input type="text" id="exchangeCode" placeholder="輸入兌換碼" />
<div id="priceContainer"><!-- 這裡 innerHTML 注入 select --></div>
<span id="finalPrice"></span>

2. 兌換碼失焦處理邏輯

$('#exchangeCode').on('blur', function() {
    const code = $(this).val().trim();
    if (!code) return;

    // 1. 驗證兌換碼有效性（略，假設 AJAX 返回 discount 折扣）
    $.post('/api/validate', {code}, function(res) {
        if (!res.valid) return alert('兌換碼無效');

        // 2. 關鍵：從動態 select 取選中文本/值
        // 注意：#txtHintPrice 是注入後才存在的 ID
        const selectedText = $('#txtHintPrice option:selected').text();  // 顯示文本
        const selectedVal  = $('#txtHintPrice').val();                   // value 值

        // 3. 計算最終價格
        const originalPrice = parseFloat($('#originalPrice').val()) || 0;
        const discount = parseFloat(res.discount) || 1;
        const finalPrice = (originalPrice * discount).toFixed(2);

        $('#finalPrice').text(finalPrice);
    }, 'json');
});

3. 關鍵點解析

• $('#txtHintPrice option:selected').text()：精確獲取**當前選中 option 的顯示文本**
• $('#txtHintPrice').val()：直接獲取 select 的 **value 值**（單選框等同於選中 option 的 value）
• 無需額外綁定 change 事件，失焦時即時讀取當前狀態即可

進階：若 Select 內容也需動態更新

若折扣驗證後需根據結果重新渲染 Select 選項，請在 AJAX 回調中先 $('#priceContainer').html(newSelectHtml) 再讀取值，確保 DOM 就緒。

避坑提醒

1. 不要在 $(document).ready() 中預綁定動態元素事件，改用事件委託 $(document).on('blur', '#exchangeCode', ...)
2. 確保注入的 HTML 中 select 帶有唯一 id，避免選擇器匹配到多個元素
3. 數值計算前務必 parseFloat 並提供默認值，防 NaN 污染顯示