How can I get a value from a personalized dropdown?

Question

All the people use the normal dropdown like:

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

Like that I can get the selected value trough PHP. But if I use divs I can't get the values from the multiple dropdowns.

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>

My idea is that the people select the first div "Apenas 1" and on submit I get that values on PHP.

I really can't find any tips that can help me or I'm just newbie on this.. Thanks.

Answer 1

Just add <input type="hidden" name="select" id="hidden-select" />

Change <div class="select-menu-option" data="5" to ... data-val="5"

and in: select_best_plan add

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