将变量传递给.html()函数

时间:2014-11-06 16:39:02

标签: javascript jquery

     <!-- 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];。我做错了什么?

我真的很陌生。非常感谢你的帮助!!

更新
控制台输出(镀铬):

     <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"
    }
}

3 个答案:

答案 0 :(得分:1)

有关访问jQuery媒体资源的selectedIndex方式,请参阅this answer。你的答案可能如下:

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

答案 1 :(得分:1)

要获取select元素的值,请使用this.value。因此改变:

var event = events[this.selectedIndex];

致:

var event = events[this.value];

但是,如果 json 是一个索引为0,1,2,3,4的数组,而不是一个选项值为keys的对象,那么您对this.selectedIndex的使用是正确的。

<强>更新

根据发布的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}) );
});

答案 2 :(得分:1)

首先,您不需要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?