Squeak.ru - шаблоны программирования

Значение выбора параметра вывода JS в качестве параметра получения в ссылке

У меня есть выпадающий список...

<select name="selection">
    <option value="apple">apple</option>
    <option value="orange">orange</option>
    <option value="banana">banana</option>
</select>

... и под этим выпадающим списком находится ссылка, которая открывает iframe в Fancybox.

<a href="iframe_content.php?selection={selection of dropdown list}" data-fancybox data-options='{"type" : "iframe", "iframe" : {"preload" : true, "css" : {"width" : "500px", "height" : "400px", "overflow" : "hidden"}}}'>
    Click
</a>

Как видите, ссылка имеет параметр GET (selection=...), который должен динамически устанавливать все, что в данный момент выбрано в раскрывающемся списке, в качестве значения параметра без перезагрузки страницы.

Я знаю, как напечатать раскрывающееся значение внутри div или диапазона, который имеет класс или идентификатор. Но я не знаю, как это сделать как часть ссылки, то есть значение атрибута.

Большое спасибо.

javascript get html drop-down-menu select
09.09.2019

Ответы:


1

если вы можете распечатать раскрывающееся значение в div, то это здорово. теперь вы можете получить значение раскрывающегося списка и напрямую отправить ajax. Просто добавь

id='anchor'

в теге,

id="dropdown" onclick='getSelectedValue()'

в теге select и добавьте скрипт ниже

function getSelectedValue() {
var e = document.getElementById("dropdown");
option= e.options[e.selectedIndex].value;
document.getElementById("anchor").href="iframe_content.php?selection="+option;
return true;

}

09.09.2019
  • Работает отлично. Хотя в вашем объяснении отсутствует упоминание о добавлении id=dropdown в тег select. А также измените кнопку на тег выбора. Тогда я одобрю ваш ответ. Спасибо. 09.09.2019

    • 2

    на вашем якоре добавьте прослушиватель кликов и обновите элемент href самостоятельно

    document.getElementById("anchor").onclick = function() { 
document.getElementById("anchor").href="iframe_content.php?selection=" + document.getElementById('selection').value;
 return true;
 };
    09.09.2019
    Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...