Question

我在jquery中使用全日历来选择和搜索事件，我希望每次他们单击按钮时都会出现一个模式，因此当他们选择一个事件或指定的城市时，将会出现一个结果。这是HTML，这些是条件：

用户搜索城市：结果将包括所有城市
用户将搜索事件：结果将包含一个事件。
用户将搜索城市和事件：结果将包括与城市的活动。

这两个条件有效，但第三个条件不起作用

<div class="modal" id="modal-name">
    <div class="modal-sandbox">&nbsp;</div>
    <div class="modal-box">
        <div class="modal-header">
            <h3>Events</h3>
        </div>
        <div class="modal-body">
            <div class="event-list">&nbsp;</div>
            <div id="#eventdetails" class="order-details-table">&nbsp;</div>
        </div>
    </div>
</div>

<div id="calendar">&nbsp;</div>
<hr class="calendar">

<select id="search" class="modal-trigger" name="search" data-modal="modal-name">
    <option selected="selected" value="select">Select an Event</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="all">All</option>
</select></p>

<select id="searchcity" class="modal-trigger" name="searchcity" data-modal="modal-name">
    <option selected="selected" value="select">Search a City</option>
    <option value="City1">City1</option>
    <option value="City2">City2</option>
    <option value="City3">City3</option>
    <option value="City4">City4</option>
    <option value="City5">City5</option>
</select>
<button id="searchnow">Search</button>

这是Jquery的代码，我希望当他们选择结果上方的值时会出现

JSON文件

   {
        "title": "Tasting Festival",
        "start": "start date",
        "tags": "1",
        "imageurl": "",
        "products": [
          {
            "name": "City 1",
            "url": "",
            "time": "",
            "location": ""
          },
          {
            "name": "",
            "url": ",
            "time": "",
            "location": ""
          }

        ]
      }
$("#searchnow").click(function () {
    var selectedCity = $("#searchcity").val();
    var selectedEvent = $("#search").val();
    $.getJSON('events.json', 
        function (data) {
            render(selectedCity, selectedEvents, data);
        });
    });


      function render(selectedCity, selectedEvent, data) {
    $(".order-details-table").empty();

     $(data).each(function (i, v) {  
        if(v.products)
         $(v.products).each(function(index,p){

                    if (selectedCity == 'all' || p.name == selectedCity)  {

                                    $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + p.name + '</a></td><td class="o-box-name">' + v.title + '<br><small>' + p.time + '</small><small>&nbsp' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');


                                } if (selectedEvent == v.tags && selectedCity == p.name ){
                    $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + p.name + '</a></td><td class="o-box-name">' + v.title + '<br><small>' + p.time + '</small><small>&nbsp' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');

            }  if (selectedEvent == 'all' || v.tags == selectedEvent)  {

                                    $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + p.name + '</a></td><td class="o-box-name">' + v.title + '<br><small>' + p.time + '</small><small>&nbsp' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');



                                }
     });  
});
}

两个选择选项以获取结果，一个搜索按钮

0 个答案: