Вывод атрибута data с помощью jquery

757

В этой статье рассмотрим, как у элемента получить атрибут data с помощью jquery. Для примера, рассмотрим селективный список, опции которого в атрибуте data-url содержат текст, который надо вывести в блоке ниже. Так же рассмотрим, как c помощью атрибута data сделать переход по url-адресу при выборе опции.

Вывод данных

Html разметка списка

<select id="select">
<option data-url="ссылка 1">Выбрать ссылку 1</option>
<option data-url="ссылка 2">Выбрать ссылку 2</option>
<option data-url="ссылка 3">Выбрать ссылку 3</option>
</select>
<div class=urlname></div>

Скрипт для вывода данных

jQuery(function($) {
$("#select").change(function(){
let url=$('#select option:selected').data('url');
$('.urlname').html(url);
});
})

Демо - пример 1

При выборе опции под списком будет отображаться текст из атрибута data-url.

Список с переходом по url при выборе опции

Если в атрибуте data-url указать ссылки и немного изменить скрипт, то при выборе опции будет осуществляться переход по ссылке в атрибуте data-url

Разметка

<select id="select">
<option data-url="https://coderistu.ru/2023/09/18/knopki-plus-minus-dlya-input">Как добавить атрибут элементу с помощью jquery</option>
<option data-url="https://coderistu.ru/2023/09/18/knopki-plus-minus-dlya-input">Кнопки + и - для input</option>
<option data-url="https://coderistu.ru/2023/09/12/udalit-pystye-elementy-php">Как удалить пустые элементы из php массива</option>
</select>

Скрипт для перехода по url при выборе опции

jQuery(function($) {
$("#select").change(function(){
let url=$('#select option:selected').data('url');
window.location = url;
});
})