將PHP JSON對象的值提取到jQuery中

Question

我正在動態生成PHP中的值列表，我已使用json_encode將其轉換為json，如下所示：

<?php $posts = get_post_meta(get_the_id(), 'size_repeatable', false);
    $specials = array();
    foreach ( $posts as $post ) {
        $size_available = $post['size_available'];
        if(intval(get_the_title($size_available)) > 1) { $add_sq_ft = " sq ft room"; } else { $add_sq_ft = ""; }
        $size_special_offer = $post['size_special_offer'];
        $specials[] = array(get_the_title($size_available) . $add_sq_ft => $post['size_special_offer']);
    }
    $specials_simplified = array_reduce($specials, 'array_merge', array());
    $specials_json = json_encode($specials_simplified);
?>

哪個產生這個JSON：

{"15 sq ft room":"10% off your first month","25 sq ft room":"15% off your first 1 month","35 sq ft room":"20% off your first 1 month","50 sq ft room":"25% off your first 1 month","75 sq ft room":"50% off your first 2 month","100 sq ft room":"50% off your first 2 month","125 sq ft room":"50% off your first 2 month","150 sq ft room":"50% off your first 2 months","200 sq ft room":"50% off your first 2 month"}

然后，我有一個標准的HTML Select字段，其中包括15平方英尺的房間，25平方英尺的房間，35平方英尺的房間，50平方英尺的房間，75平方英尺的房間等作為可選擇的選項（您一次只能選擇一個選項） 。

我有一個.change jQuery函數，當更改時應該引用上面的JSON值，例如：

<script type="text/javascript">
    jQuery(document).ready(function( $ ) {
        $('#input_2_11').change(function(event) {
            var current_selection = $('#input_2_11' + ' option:selected').html();
            var size_json = <?php echo $specials_json; ?>;
            $('#dynamic_offer').html(size_json);
        });
    });
</script>

基本上我需要將#input_2_11標簽與JSON對象進行比較，以顯示正確的值（特價）。

例如，如果用戶選擇了“15平方英尺的房間”，那么它將在#dynamic_offer div中顯示“第一個月10％的折扣”。

但這是我真正掙扎的地方 - 首先嘗試將變量'current_selection'與'size_json'進行比較，然后顯示與該大小相關的正確特價。

Answer 1

你可以嘗試這個：

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
    $('#input_2_11').change(function(event) {
        var current_selection = $('#input_2_11' + ' option:selected').html();
        var size_json = <?php echo $specials_json; ?>[current_selection];
        $('#dynamic_offer').html(size_json);
    });
});

Answer 2

您是否使用console.log（）來檢查current_selection包含的內容並驗證size_json的內容？

我認為current_selection不會達到您的預期; .html()將返回選項中的整個HTML，而您可能想嘗試類似$('#input_2_11').val()來獲取輸入的當前值。

獲得current_selection的值后，可以執行size_json[current_selection]來訪問特殊商品，因為current_selection的值將是size_json所需的鍵值對的鍵。

<script type="text/javascript">
    var size_json = <?php echo $specials_json; ?>;
    jQuery(document).ready(function( $ ) {
        $('#input_2_11').change(function() {
            // If you need the option's value
            //var current_selection = $('#input_2_11').val();

            // If you just want the text of the option.
            var current_selection = $('#input_2_11 option:selected').html();

            $('#dynamic_offer').html(size_json[current_selection]);
        });
    });
</script>

Answer 3

這是一個完整的例子。 使用選項的.html()作為json變量中的鍵。 為了使你的代碼工作，只需用<?php echo $specials_json; ?>;替換為json賦值<?php echo $specials_json; ?>; <?php echo $specials_json; ?>; 。

 jQuery(document).ready(function() { // For brevity var size_json = {"15 sq ft room":"10% off your first month","25 sq ft room":"15% off your first 1 month","35 sq ft room":"20% off your first 1 month","50 sq ft room":"25% off your first 1 month","75 sq ft room":"50% off your first 2 month","100 sq ft room":"50% off your first 2 month","125 sq ft room":"50% off your first 2 month","150 sq ft room":"50% off your first 2 months","200 sq ft room":"50% off your first 2 month"}; // You don't need this part. for (var key in size_json) { if (size_json.hasOwnProperty(key)) { $('#input_2_11').append($('<option/>').html(key)); } } function checkSelection() { var current_selection = $('#input_2_11 option:selected').html(); $('#dynamic_offer').html(size_json[current_selection]); // Note the [current_selection] } checkSelection(); $('#input_2_11').change(checkSelection); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="input_2_11"> </select> <div id="dynamic_offer"> </div>