Задать вопрос
kapnod
@kapnod
javascript

Как сделать выбраный пункт в Select Активным?

Сделал простое выпадающее меню для навигации по категориям сайта.
<select id="channel-select" name="channel" onchange="window.location.href = this.options[this.selectedIndex].value;"  >
		
	<option value="all">Name</option>
												
				<optgroup label="Name">
					<option value="url">Name</option>
					<option value="url">Name</option>
					<option value="url">Name</option>
					<option value="url">Name</option>
					<option value="url">Name</option>
					<option value="url">Name</option>
				</optgroup>
				
				<optgroup label="Name">
					<option value="url">Name</option>
					<option value="url">Name</option>
					<option value="url">Name</option>
					<option value="url">Name</option>
					<option value="url">Name</option>
				</optgroup>
</select>

И собственно проблема вот в чем: нужно сделать так, чтобы когда переходиш по ссылке или уже находишься в определенной категории, активным пунктом меню должен быть тот на котором находишься и становиться не кликабельным. Как это сделать?
  • Вопрос задан
  • 5161 просмотр
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 1
FeNUMe
@FeNUMe
Вот простейшее решение для подсветки активной страницы в меню, средствами js. В вашем случае нужно немного допилить для работы с селектом.

UPD. 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<select id="channel-select" name="channel" onchange="window.location.href = this.options[this.selectedIndex].value;">
    <option value="/">Все категории</option>

    <optgroup label="Name">
        <option value="/test.html">page 1</option>
        <option value="/test2.html">page 2</option>
    </optgroup>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
<script type="application/javascript">

    $(document).ready(function () {
        var url = window.location.pathname;
        $('#channel-select option[value="' + url + '"]').attr({ 'disabled':'disabled', 'selected':'selected'});
    })
</script>
</html>
Простой пример
Ответ написан
12 комментариев
12 комментариев
Пригласить эксперта
Ответы на вопрос 1
romanzhak
@romanzhak
Mathematician
Фиксируйте состояние вашего веб-приложения, например, с помощью History API. После чего можно проверять, где находится пользователь, и выполнять необходимые действия.
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать мобильное приложение на Flutter
18 дек. 2024, в 13:22
30000 руб./за проект
Создание сайта с chatGPT
18 дек. 2024, в 12:37
10000 руб./за проект
Wordpress+Elementor правки
18 дек. 2024, в 12:22
5000 руб./за проект
Ещё заказы