Как я могу получить значение из персонализированного выпадающего списка?

Question

Все люди используют нормальное выпадающее меню, как:

<form>
<select>
<option> bla bla </option>
</select>
</form>

Таким образом, я могу получить выбранное значение через PHP. Но если я использую div, я не могу получить значения из нескольких выпадающих списков.

function select_best_plan(sel, _this) {
  $parent = $(_this).closest('.select-general');
  $parent.find('button font').html($(_this).find('font').html());
  $parent.find('.select-menu .select-menu-option').removeClass('active');
  $(_this).addClass('active');
}

.select-general {
  display: inline-block;
  overflow: hidden;
  border-radius: 12px;
  vertical-align: middle;
  position: relative;
  text-transform: uppercase;
  background: #182045;
  color: #FFFFFF;
  width: 170px;
  min-width: 160px;
  text-align: left;
  font-size: 15px;
  max-width: 100%;
}

.select-general .select-button {
  text-align: right;
  font-size: 13px;
  height: 38px;
  line-height: 38px;
  padding: 0px 13px;
  border-radius: 12px;
  color: #FFFFFF;
  width: 100%;
}

.select-general .select-button font {
  text-align: left;
  width: calc(100% - 20px);
  height: 100%;
  overflow: hidden;
  max-width: 340px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-general .select-menu {
  padding: 0px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.15s ease-out, padding 0.15s ease-out;
}

.select-general .select-menu-option {
  text-align: right;
  font-size: 13px;
  height: 38px;
  line-height: 38px;
  padding: 0px 13px;
  color: #FFFFFF;
  width: calc(100% - 26px);
  cursor: pointer;
}

.select-general .select-menu-option font {
  text-align: left;
}

.select-general .select-menu-option:hover {
  background: #1A2A74;
}

.select-general .select-menu-option.active {
  opacity: 0.5;
}

.select-general:hover .select-menu {
  padding: 10px 0px;
  max-height: 500px;
  transition: max-height 0.15s ease-in, padding 0.15s ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-general" style="width: 250px;">
  <button class="select-button">
<font class="float-left">Quantos Utilizadores Quer?</font><i class="icon small caret down"></i>
</button>
  <div class="select-menu">
    <div class="select-menu-option" data="1" onclick="select_best_plan(6, this)">
      <font class="float-left">Apenas 1</font>
    </div>
    <div class="select-menu-option" data="3" onclick="select_best_plan(7, this)">
      <font class="float-left">Até 3</font>
    </div>
    <div class="select-menu-option" data="5" onclick="select_best_plan(8, this)">
      <font class="float-left">Até 5</font>
    </div>
    <div class="select-menu-option" data="10" onclick="select_best_plan(9, this)">
      <font class="float-left">Até 10</font>
    </div>
    <div class="select-menu-option" data="15" onclick="select_best_plan(10, this)">
      <font class="float-left">Até 15</font>
    </div>
  </div>
</div>

Моя идея состоит в том, что люди выбирают первый div "Apenas 1", и при отправке я получаю эти значения на PHP.

Я действительно не могу найти какие-либо советы, которые могут мне помочь, или я новичок в этом .. Спасибо.

Answer 1

Просто добавьте <input type="hidden" name="select" id="hidden-select" />

Изменить <div class="select-menu-option" data="5" на ... data-val="5"

и в: select_best_plan добавить

$('#hidden-select').val($(_this).data('val'))

Answer 2

В Интернете доступно много контента, объясняющего множество способов реализации такого поведения.

Одна такая ссылка -

1. Как использовать FormData для загрузки ajax-файла
2. Установка значения скрытого поля в форме с помощью jQuery ".val ()" не работает

Для более подробной информации о реализации вы можете Google с этими ключевыми словами -

1. Аякс звонит
2. Отправка формы со скрытыми полями ввода
3. Как создать и отправить форму, используя FormData. и т.д.

Answer 3

Извините за первый ответ.

Что ж, если вы хотите использовать настройку select, тогда используйте JavaScript для получения данных.Обычно только input теги select могут публиковаться или отправляться автоматически с помощью тега form.

Кнопка отправки запускает функцию JavaScript, затем получает значение выбранного элемента div и создает входной тег, содержащий значение элемента div.Пример:

<div class="select-general" style="width: 250px;">
<button class="select-button">
<font class="float-left">Quantos Utilizadores Quer?</font><i class="icon small caret down"></i>
</button>
<div class="select-menu">
<div class="select-menu-option" data="1" onclick="select_best_plan(6, this)">
<font class="float-left">Apenas 1</font>
</div>

function getselectedval(){
  var data = $("div selected identifier here").attr("data");
  $("container of passing input").append('<input name="name" val="'+ data +'" type="hidden">');
 //submit the form
 $("your form").submit();
}

Это кажется обманом, но надеюсь, что это поможет.