Я использую полный календарь в jquery для выбора и поиска событий. Я хочу, чтобы каждый раз, когда они нажимали кнопку, появлялся модал, поэтому, когда они выбирают событие или назначенный город, появляется результат.Это HTML, Вот условия:
- Поиск пользователя по городу: результат будет включать все города
- Пользователь будет искать событие: результат будет включать событие.
- Пользователь будет искать как город, так и событие: результат будет включать в себя событие с городом.
2 условия работают, но третье условие не будет
<div class="modal" id="modal-name">
<div class="modal-sandbox"> </div>
<div class="modal-box">
<div class="modal-header">
<h3>Events</h3>
</div>
<div class="modal-body">
<div class="event-list"> </div>
<div id="#eventdetails" class="order-details-table"> </div>
</div>
</div>
</div>
<div id="calendar"> </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> ' + 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> ' + 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> ' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
}
});
});
}