将变量传递给.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？