將變量傳遞給.html（）函數

Question

 <!-- The select drop down menu (works fine) --> 
    <select id="select-event-type"> 
     <?php foreach ($this->events as $event) { 
      echo "<option value='" .$event->event_id. "'>" .$event->event_title."</option>"; 
     }?> 
    </select> 

    <!-- The javascript, which is supposed to output something according to the chosen option in the select drop down --> 
    <script> 
      (function ($) { 
       var events = <?php echo (count($this->events) > 0) ? json_encode($this->events) : "null"; ?>; 
       $(document).ready(function() { 
        $('#select-event-type').change(function() { 
         if (events) { 
          var event = events[this.selectedIndex]; 
          $('#event-details').html(event); 
         } 
        }); 
       }); 
      })($); 
    </script> 

<!-- In this div the output will be displayed --> 
<div id="event-details"></div> 

事件變量未定義。

如果我例如這樣做：var event = 'hello'它會輸出'hello'，因爲它應該是。

所以這個問題似乎與這部分：events[this.selectedIndex];。我做錯了什麼？

我對此很新。非常感謝你的幫助！！

UPDATE：
控制檯輸出（在鉻）：

 <script> 
      (function ($) { 
       var events = JSON.parse({"1":{"event_id":"1","event_title":"event1","event_desc":"event1","event_location":"eventlocation","event_requirements":"event1","event_date":"2022-07-20 15:00:00"},"2":{"event_id":"2","event_title":"event2","event_desc":"event2","event_location":"eventlocation","event_requirements":"event2","event_date":"2015-04-20 15:00:00"},"3":{"event_id":"3","event_title":"event3","event_desc":"event3","event_location":"eventlocation","event_requirements":"event3","event_date":"2019-11-20 16:00:00"}});    $(document).ready(function() { 
        $('#select-event-type').change(function() { 
      if (events) { 
       var event = events[$(this).selectedIndex]; 
       $('#event-details').html(event); 
       } 
      }); 
     }); 

    </script> 

JSON：

{ 
    "1": { 
     "event_id": "1", 
     "event_title": "event1", 
     "event_desc": "event1", 
     "event_location": "eventlocation", 
     "event_requirements": "event1", 
     "event_date": "2022-07-20 15:00:00" 
    }, 
    "2": { 
     "event_id": "2", 
     "event_title": "event2", 
     "event_desc": "event2", 
     "event_location": "eventlocation", 
     "event_requirements": "event2", 
     "event_date": "2015-04-20 15:00:00" 
    }, 
    "3": { 
     "event_id": "3", 
     "event_title": "event3", 
     "event_desc": "event3", 
     "event_location": "eventlocation", 
     "event_requirements": "event3", 
     "event_date": "2019-11-20 16:00:00" 
    } 
} 

Answer 1

要得到select元素使用this.value的價值。因此改變：

var event = events[this.selectedIndex]; 

要：

var event = events[this.value]; 

不過，如果你JSON是索引數組0,1,2,3,4而不是選項值的對象爲keys那麼你的this.selectedIndex使用是正確的。

UPDATE：

在樣品的光JSON貼出正確的代碼應該是：

var event = events[this.selectedIndex + 1].event_title; 

特別注意

您可以通過使用得到所有的事件數據要麼是：

var event = JSON.stringify(events[this.selectedIndex + 1]); //gives you a string of everything 

或者你可以建立你如何希望它看起來像這樣：

var event = $('<div/>'); 
$.each(events[this.selectedIndex + 1], function(k,v) { 
    event.append($('<div/>',{text:k + ': ' + v})); 
}); 

Answer 2

用於訪問selectedIndex屬性的jQuery方式參見this answer。答案可能是這樣的：

var event = events[$(this).prop("selectedIndex")]; 

Answer 3

首先你不需要在2種準備情況。試着去做，如果不工作，請告訴我。

<script> 
    $(document).ready(function() { 
    var events = <?php echo (count($this->events) > 0) ? json_encode($this->events) : "null"; ?>; 
     $('#select-event-type').change(function() { 
     if (events) { 
      var event = events[$(this).selectedIndex]; 
      $('#event-details').html(event); 
      } 
     }); 
    }); 

</script> 

和什麼意思selectedIndex？