У меня есть веб-сайт на PHP, где index.php вызывает разные веб-страницы следующим образом:
index.php?page=автомобили
а потом:
<html code>
<?php
$pagesOk = array('cars, 'boats', 'trucks);
...
if (in_array($_GET['page'], $pagesOk)) {
require_once('pages/'.$page.'.php');
}
У меня также есть окно поиска (заполненное автозаполнением JQuery), присутствующее в верхней части файла index.php, так что оно доступно со всех подстраниц.
<nav class = "searchbar input-group">
<input type = "hidden" name = "search_param" value = "all" id = "search_param">
<input class = "reset" type = "search" id = "searchInput" autocomplete = "none" data-clearButton >
<button class = "reset cd-nav-trigger" aria-label = "Toggle menu"></button>
<div class = "input-group-btn search-panel">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
<span id = "search_concept">All content<span class = "caret"></span>
</button>
<ul class = "dropdown-menu mode-recherche" role = "menu" style = "top: 10px !important; left: -10px !important">
<li><a href = "#cars">Cars</a></li>
<li><a href = "#boats">Boats</a></li>
<li><a href = "#trucks">Trucks</a></li>
<li class = "dropdown-divider"></li>
<li><a href = "#all">All content</a></li>
</ul>
</div>
Я бы хотел, чтобы выпадающее меню автоматически выбиралось для текущих страниц.
Это означает, что если пользователь находится на странице index.php?page=boats, в поле поиска будет выбрано раскрывающееся меню «Лодки», чтобы по умолчанию он мог искать только лодки.
Вы можете передать имя своей страницы, а затем selected
вариант на основе $page
имени
здесь полный код, включая php:
<?php
$pagesOk = array('cars','boats', 'trucks');
$page = $_GET['page'];
if (in_array($page, $pagesOk)) {
# do somthing
# require_once('pages/'.$page.'.php');
}
?>
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class = "navbar navbar-expand-sm bg-light navbar-light">
<div class = "container">
<a class = "navbar-brand" href = "javascript:void(0)">LOGO</a>
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#mynavbar">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "mynavbar">
<ul class = "navbar-nav me-auto">
<li class = "nav-item">
<a class = "nav-link" href = "javascript:void(0)">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "javascript:void(0)">Pages</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "javascript:void(0)">Contacts</a>
</li>
</ul>
<form class = "d-flex">
<select class = "form-select">
<option>All content</option>
<option <?=$page == 'cars' ? "selected" : ""; ?>>Cars</option>
<option <?=$page == 'boats' ? "selected" : ""; ?>>Boats</option>
<option <?=$page == 'trucks' ? "selected" : ""; ?>>Trucks</option>
</select>
</form>
</div>
</div>
</nav>
<div class = "container mt-3">
<h3>Some body text</h3>
<p>You can also include forms inside the navigation bar.</p>
</div>
</body>
</html>
пожалуйста, поделитесь полным кодом здесь или codepen.io
Сделать это с помощью <select> — простое решение, но не по теме. Мне нужно сохранить эти <ul><li> и сделать это с помощью jquery