Как добавить параметры в DropDownList с помощью jQuery?
Как говорится в вопросе, как добавить новую опцию в DropDownList с помощью jQuery?
Без использования каких-либо дополнительных плагинов,
Если у вас было много опций, или этот код нужно было запускать очень часто, то вам следует рассмотреть возможность использования DocumentFragment вместо того, чтобы многократно модифицировать DOM. Только для нескольких вариантов я бы сказал, что это того не стоит.
DocumentFragment хороший вариант для повышения скорости, но мы не можем создать элемент option, используя document.createElement(‘option’) IE6 и IE7, его не поддерживают.
Что мы можем сделать, это создать новый элемент выбора и затем добавить все параметры. После завершения цикла добавьте его к реальному объекту DOM.
Таким образом, мы изменим DOM только один раз!
Без плагинов, это может быть проще без использования большого количества jQuery, вместо этого немного более старой школы:
Если вы хотите указать, является ли параметр a) выбранным по умолчанию, и b) должен быть выбран сейчас, вы можете передать еще два параметра:
С плагином: окно выбора jQuery . Ты можешь сделать это:
Вы можете сначала очистить свой DropDown $ (‘# DropDownQuality’). Empty ();
Мой контроллер в MVC возвращал список выбора только с одним элементом.
Добавить товар в список в начале
Добавить элемент в список в конце
Заметьте, что решение @ Phrogz не работает в IE 8, в то время как @ nickf работает во всех основных браузерах. Другой подход:
Вы можете использовать прямой
$»(.ddlClassName»).Html(«<option selected=\»selected\» value=\»1\»>1</option><option value=\»2\»>2</option>»)
-> Здесь вы можете использовать прямую строку
А также используйте .prepend (), чтобы добавить опцию в начало списка опций. http://api.jquery.com/prepend/
используя JQuery вы можете использовать
где myid — это идентификатор выпадающего списка, а newvalue — текст, который вы хотите вставить.
Мне нужно было добавить столько опций в выпадающие списки, сколько было выпадающих на моей странице. Так что я использовал это так:
При этом динамически устанавливаются выпадающие списки со значениями, такими как 1 до n, и автоматически выбирается значение для порядка, в котором был выпадающий список (т. Е. 2-й выпадающий список получил «2» в поле и т. Д.).
Добавление новой категории в DropDownList с помощью пользовательского интерфейса jQuery
Тег HTML Select идеально подходит для представления списка фиксированных данных категорий, но часто приходится добавлять новые категории. Предположим, что нам нужно добавить жанр "Opera" к категориям в нашей базе данных? В этом разделе мы будем использовать пользовательский интерфейс jQuery, чтобы добавить диалоговое окно, которое можно использовать для добавления новой категории. На рисунке ниже показано, как пользовательский интерфейс будет отображаться в браузере.
Когда пользователь выбирает ссылку " Добавить новый жанр ", всплывающее диалоговое окно предлагает пользователю ввести новое название жанра (и, при необходимости, описание). На рисунке ниже показано всплывающее диалоговое окно Добавление жанра .
Если введено новое имя жанра и нажата кнопка сохранить , происходит следующее:
Вызов AJAX отправляет данные в метод Create в контроллере жанра, который сохраняет новый жанр в базе данных и возвращает новые сведения о жанре (название и идентификатор жанра) в формате JSON.
JavaScript добавляет новые данные о жанре в список выбора.
JavaScript делает новый жанр выбранным элементом.
На приведенном ниже рисунке в базу данных был добавлен элемент Opera и выбран в раскрывающемся списке Жанр .
Откройте файл виевс\стореманажер\креате.кштмл и замените разметку жанра следующим кодом:
Частичное представление _ChooseGenre будет содержать всю логику для подключения JavaScript и jQuery, которые используются для реализации функции добавления нового жанра. После завершения кода это будет просто сделать с помощью пользовательского интерфейса исполнителя.
В обозреватель решений щелкните правой кнопкой мыши папку виевс\стореманажер и выберите Добавить, а затем Просмотрите. В поле View Name input (имя представления ) введите _ChooseGenre а затем нажмите кнопку Добавить. Замените разметку в файле виевс\стореманажер\_ChooseGenre. cshtml следующим:
В первой строке объявляется, что в качестве модели передается Album , точно такую же инструкцию Model, которая находится в представлении Create. Следующие несколько строк являются разметкой вспомогательной функции метки . Следующая строка является вызовом модуля DropDownList , точно таким же, как в исходном представлении Create. В следующей строке добавляется ссылка с именем Add New Genre и стили наподобие кнопки. Строка, содержащая ValidationMessageFor , копируется непосредственно из представления создания. Следующие строки:
создает скрытый тег div с ИДЕНТИФИКАТОРом genreDialog . Для подключения к диалоговому окну Добавление жанра с идентификатором genreDialog в этом div будет использоваться jQuery. Последние два тега скрипта содержат ссылки на файлы JavaScript, которые будут использоваться для реализации функции добавления нового жанра. Файл /скриптс/чусеженре.ЖС предоставляется в проекте, он будет рассмотрен позже в этом руководстве.
Запустите приложение и нажмите кнопку Добавить новый жанр . В диалоговом окне Добавление жанра введите Opera в поле имя ввода.
Нажмите кнопку Сохранить . Вызов AJAX создает категорию Opera, а затем заполняет раскрывающийся список с помощью Opera и устанавливает Opera в качестве выбранного жанра.
Введите имя исполнителя, название и Цена, а затем нажмите кнопку создать . Если ввести цену меньше $8,99, в верхней части представления индекса появится новый альбом. Убедитесь, что новая запись альбома сохранена в базе данных.
Попробуйте создать новый жанр только с одной буквой. Следующий код в файле моделс\женре.КС задает минимальную и максимальную длину имени жанра.
Отчеты о проверке на стороне клиента необходимо ввести строку от 2 до 20 символов.
Проверка добавления нового жанра в базу данных и списка выбора.
Откройте файл скриптс\чусеженре.ЖС и изучите код.
Во второй строке используется идентификатор genreDialog для создания диалогового окна в теге DIV в файле виевс\стореманажер\_ChooseGenre. cshtml . Большинство именованных параметров говорят сами за себя. Параметр autoOpen имеет значение false, при нажатии кнопки создать жанр диалоговое окно открывается явно (это описано в последнем случае). В диалоговом окне есть две кнопки: сохранить и отменить. Кнопка Отмена закрывает диалоговое окно. В следующем коде показана функция Save для кнопки.
var createGenreForm выбирается из идентификатора createGenreForm . Идентификатор createGenreForm был задан в следующем коде, обнаруженном в файле виевс\женре\_CreateGenre. cshtml .
Вспомогательная перегрузка HTML. бегинформ , используемая в файле виевс\женре\_CreateGenre. cshtml , создает HTML с атрибутом Action, содержащим URL-адрес для отправки формы. Это можно увидеть, отобразив страницу Создание альбома в браузере и выбрав пункт Показать исходный код в браузере. В следующей разметке показан созданный код HTML, содержащий тег form.
Строка jQuery $.post делает вызов AJAX атрибутом Action ( /StoreManager/Create ) и передает данные из диалогового окна создание жанра . Данные состоят из имени нового жанра и необязательного описания. При успешном вызове AJAX в разметку Select добавляется новое имя и значение жанра, а для нового жанра устанавливается выбранное значение. Так как это динамически создаваемая разметка, вы не можете увидеть новый параметр SELECT, просмотрев исходный код в браузере. Новый HTML-код можно увидеть с помощью средств разработчика F12 9 для разработчиков. Чтобы просмотреть новый параметр SELECT, в Internet Explorer 9 нажмите клавишу F12, чтобы запустить средства разработчика F12. Перейдите на страницу создания и добавьте новый жанр, чтобы выбрать новый жанр в списке жанр выбор. В средствах разработчика F12:
Перейдите на вкладку HTML.
Нажмите значок обновления. 
В поле поиска введите GenreID.
С помощью следующего значка 
Перейдите к следующему тегу SELECT:
Разверните Последнее значение параметра.
В следующем коде в файле скриптс\чусеженре.ЖС показано, как кнопка Добавить новый жанра будет подключена к событию Click и как будет создано диалоговое окно Добавление нового жанра .
В первой строке создается функция Click, присоединенная к кнопке Добавить новый жанр . Следующая разметка из файла Виевс\стореманажер\_ChooseGenre. cshtml показывает, как создается кнопка Добавить новый жанр :
Метод Load создает и открывает диалоговое окно Добавление жанра и вызывает метод jQuery parse , чтобы клиентская проверка находилась на данных, вводимых в диалоговом окне.
Как в MVC 4 передать выбранные данные из dropdownlist на другую страницу?
Как в MVC 4 передать выбранные пользователем данные из dropdownlist на другую страницу?
Как передать данные на другую страницу?
при входе и регистрации я передавал значение Nick_name методом GET ну и при его помощи я вытягивал.
Как передать данные на другую страницу php
В общем есть форма, допустим с такими полями "Имя", "Фамилия", "Адрес". Все я это отправляю при.
Как передать данные из формы на другую страницу
Всем привет. Такая проблема. Есть код: Между тегами <head> и </head> вставить: <script.
Как передать данные в цикле на другую страницу?
Подскажите, как передать значения выбранного radio, checkbox или text на другую форму, если.
Спасибо.
Каким-то таким способом? Что вместо вопросов и что дописать в контроллер?
Имя контроллера указывать без постфикса Controller.
Передать данные на другую страницу
Пишу аутентификацию. В первом фаиле код на js и отправка данных на сервер, во втором проверка на.
Передать данные на другую страницу
Помогите, не могу сделать добавление в корзину товара есть код который генерирует товары с.
Передать данные выделенной строки на другую страницу
Помогите пожалуйста, Хочу передать данные выделенной строки на другую страницу. Суть в том что в.
QCalendarWidget как передать данные выбранные пользователем
Привет всем! Нужна помощь! Есть программа с интерфейсом. Пример Как из виджета передать дату.
Выпадающий список DropDownList в Yii2
При создании пользовательских интерфейсов, кроме текстовых полей, часто используются выпадающие списки —DropDown List. Этот элемент позволяет ограничить пользователя выбором одного или нескольких вариантов из предложенного списка.
Виджет yii\widgets\ActiveField уже содержит метод dropDownList( $items,$options = [] ) , являющийся оберткой для yii\helpers\BaseHtml::activeDropDownList( $model, $attribute, $items, $options = [] ) отрисовывающего выпадающий список, используя html тег select .
Простой пример
Первый параметр $items должен быть массивом, содержащим данные для построения списка. Ключи массива будут использованы как значения элементов списка, а значения массива будут использованы как заголовки элементов списка.
Настройки выпадающего списка
Второй параметр $options — необязательный массив настроек списка.
prompt
Текстовая строка, отображаемая первым элементом без значения.
options
Массив атрибутов для элементов списка (тега option ). Ключи массива должны совпадать со значениями элементов списка.
encodeSpaces
Булево значение, активирующее кодирование пробелов в значениях элементов списка в . По-умолчанию имеет значение false .
encode
Булево значение, активирующее кодирование значений элементов списка. По-умолчанию имеет значение true . Кодирование производится посредством метода yii\helpers\BaseHtml::encode() .
Все остальные настройки будут использованы как атрибуты тега списка.
DropDownList с опцией prompt
Полученный html код
Вывод данных из модели (базы данных)
Для формирования массива данных для списка из базы данных можно воспользоваться хелпером ArrayHelper::map() .
Группированный список
Массив данных может быть многоуровневым, таким образом, можно создать группированный список.
Множественный выбор
Для включения возможности выбора нескольких элементов, нужно в параметрах указать 'multiple' => 'true' . Правда, при этом элемент select отображается как listbox .