如何在PHP WordPress短代码中获取下拉选中值并展示国家对应可用颜色

原代码核心错误点 #

• 变量名冲突：遍历生成option时直接覆盖了存储国家/地区数据的$countries数组，导致后续逻辑无法读取原始数据
• 未定义变量：匹配颜色时遍历的$avail_countries变量从未定义，匹配逻辑完全失效
• 无提交触发逻辑：下拉框选中后没有提交动作，PHP无法接收到$_POST参数，同时直接读取$_POST未加isset()判断会抛出PHP警告
• 拼写错误：原代码中比利时的英文拼写错误（Belguim应为Belgium）

推荐实现方案（无刷新，无需额外页面模板） #

这种方案不需要表单提交，也不需要你创建的page-availability.php模板，选中地区后立刻展示对应颜色，用户体验更好，修复后的短代码如下：

function availability_shortcode() {
    // 实际使用请修正行政区划归属表述
    $countries = [
        ['south-korea', 'South Korea', 'Red, Blue, Orange'],
        ['japan', 'Japan', 'Blue, Orange, Pink'],
        ['norway', 'Norway', 'Red, Blue, Green'],
        ['hong-kong', '中国香港', 'Red, Blue, Orange, Pink'],
        ['united-states', 'United States', 'Red, Blue, Orange, Pink'],
        ['taiwan', '中国台湾', 'Blue, Orange, Pink, Green'],
        ['netherlands', 'Netherlands', 'Red, Blue, Orange'],
        ['hungary', 'Hungary', 'Red, Blue, Orange, Pink'],
        ['sweden', 'Sweden', 'Blue, Orange, Green'],
        ['india', 'India', 'Red, Blue, Orange, Pink'],
        ['czech-republic', 'Czech Republic', 'Red, Blue, Orange'],
        ['belgium', 'Belgium', 'Red, Orange, Pink'],
    ];
    // 生成下拉框结构
    $select_html = '<select name="availability" id="availability">';
    $select_html .= '<option value="">请选择地区</option>';
    foreach ($countries as $item) {
        $select_html .= '<option value="' . esc_attr($item[0]) . '">' . esc_html($item[1]) . '</option>';
    }
    $select_html .= '</select>';
    // 生成颜色展示容器
    $result_html = '<div id="color-result" style="margin-top:15px;">可用颜色：请先选择地区</div>';
    // 注入前端交互逻辑
    $countries_json = json_encode($countries);
    $js = <<<EOF
    <script>
    const areaData = $countries_json;
    const selectEl = document.getElementById('availability');
    const resultEl = document.getElementById('color-result');
    selectEl.addEventListener('change', function() {
        const selectedVal = this.value;
        if (!selectedVal) {
            resultEl.textContent = '可用颜色：请先选择地区';
            return;
        }
        const matched = areaData.find(item => item[0] === selectedVal);
        if (matched) resultEl.textContent = '可用颜色：' + matched[2];
    });
    </script>
    EOF;
    return $select_html . $result_html . $js;
}
add_shortcode('availability_calculator', 'availability_shortcode');

PHP提交刷新方案（可选） #

如果要靠PHP获取POST值，确实需要把下拉框包裹在form标签里，不需要额外的page-availability.php，直接提交到当前页即可，代码示例如下：

function availability_shortcode() {
    // 实际使用请修正行政区划归属表述
    $countries = [
        ['south-korea', 'South Korea', 'Red, Blue, Orange'],
        ['japan', 'Japan', 'Blue, Orange, Pink'],
        ['norway', 'Norway', 'Red, Blue, Green'],
        ['hong-kong', '中国香港', 'Red, Blue, Orange, Pink'],
        ['united-states', 'United States', 'Red, Blue, Orange, Pink'],
        ['taiwan', '中国台湾', 'Blue, Orange, Pink, Green'],
        ['netherlands', 'Netherlands', 'Red, Blue, Orange'],
        ['hungary', 'Hungary', 'Red, Blue, Orange, Pink'],
        ['sweden', 'Sweden', 'Blue, Orange, Green'],
        ['india', 'India', 'Red, Blue, Orange, Pink'],
        ['czech-republic', 'Czech Republic', 'Red, Blue, Orange'],
        ['belgium', 'Belgium', 'Red, Orange, Pink'],
    ];
    // 处理POST请求
    $result = '';
    $selected = isset($_POST['availability']) ? sanitize_text_field($_POST['availability']) : '';
    if ($selected) {
        foreach ($countries as $item) {
            if ($item[0] === $selected) {
                $result = '<div style="margin-top:15px;">可用颜色：' . esc_html($item[2]) . '</div>';
                break;
            }
        }
    }
    // 生成表单结构
    $html = '<form method="post" action="' . esc_url(get_permalink()) . '">';
    $html .= '<select name="availability" id="availability" onchange="this.form.submit()">';
    $html .= '<option value="">请选择地区</option>';
    foreach ($countries as $item) {
        $is_selected = selected($item[0], $selected, false);
        $html .= '<option value="' . esc_attr($item[0]) . '" ' . $is_selected . '>' . esc_html($item[1]) . '</option>';
    }
    $html .= '</select>';
    // 如需手动点击查询，可删除select的onchange属性，取消下行注释
    // $html .= '<button type="submit" style="margin-left:10px;">查询</button>';
    $html .= '</form>' . $result;
    return $html;
}
add_shortcode('availability_calculator', 'availability_shortcode');

内容的提问来源于stack exchange，提问作者MayhemBliz