Хобрук: Ваш путь к мастерству в программировании

Jquery Get Dropdown Label и сделайте заполнитель элемента выбора по умолчанию

Я унаследовал некоторый php, который имеет дело с раскрывающимся списком, и мне нужно внести одно небольшое изменение: переместить метку, чтобы она стала заполнителем раскрывающегося списка по умолчанию (вместо первого варианта). Я мог бы изменить файл php, но в какой-то момент он может получить автоматическое обновление, и тогда мне придется изменить его снова. Вместо этого я хотел бы использовать jquery для перемещения метки. Я искал форумы и не совсем смог найти то, что я ищу, и заставить его работать.

Код, который я унаследовал, выглядит примерно так;

<form id="currency_converter">
 <label for="currency_switcher" class="currency_switcher_label">Choose a Currency</label>
  <select id="currency_switcher" class="currency_switcher select">
      <? foreach ( $currencies as $currency ) {
       $html .= '<option value="' . esc_attr( $currency ) . '">'</option>';
      } ?>
  </select>
</form>

Что выглядит примерно так:

введите здесь описание изображения

Тем не менее, я хотел бы, чтобы он отображал «Выберите валюту» в качестве первого значения/заполнителя в раскрывающемся списке.

Это то, что у меня есть, но не работает:

$("#currency_converter select").each(function() {
    var text = $(this).prev("label").text();
    $(this).children("option[selected='selected']").val(text).text(text);
});

Вот jsfiddle, над которым я работаю: он работает, но заменяет первую запись в раскрывающемся списке, и я хочу добавить, а не заменить....

http://jsfiddle.net/clappertrapp/79uxp4rt/


  • Мы не можем использовать ярлык как вариант. Вы можете создать новую опцию с этим значением по умолчанию в начале. 09.06.2020
  • @palaѕн Обновлено - см. скрипку, которая показывает, что использование метки работает - поэтому, пожалуйста, объясните, что вы имеете в виду? 09.06.2020

Ответы:


1

Это работает, но заменяет первую запись в раскрывающемся списке, и я хочу добавить ее, а не заменить....

Вы можете просто сделать это, используя вместо этого метод prepend, а также необходимо использовать .prop("selected", true), чтобы он был выбран по умолчанию при загрузке страницы также:

$(function() {
  $("#currency_converter select").each(function() {
    var text = $(this).prev("label").text();
    var $option = $("<option />").attr("value", text).text(text).prop("selected", true)
    $(this).prepend( $option )
  }).prev().hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="currency_converter">
  <label for="currency_switcher" class="currency_switcher_label">Choose a Currency</label>
  <select id="currency_switcher" class="currency_switcher select">
    <option value="USD">USD</option>
    <option value="AUD">AUD</option>
    <option value="GBP">GBP</option>
    <option value="EUR">EUR</option>
  </select>
</form>

09.06.2020
  • Да, это тот самый :-) Теперь работает нормально, спасибо @palash Единственная небольшая проблема заключается в том, что выбор валюты остается выбранным элементом, если вы переходите на другую страницу. Итак, если я выберу доллар США, как я могу сохранить его в качестве сфокусированного / выбранного элемента, который отображается и сохраняется на разных страницах? Возможно ли это или для этого потребуется файл cookie? 10.06.2020
  • Вы можете использовать localStorage или sessionStorage для этого. Кроме того, проверьте Локальное хранилище HTML5 и хранилище сеансов. 10.06.2020
  • Новые материалы

    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...

    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..