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.

when user select any option ,store value of selected option in hidden field inside form,then submit the form you will get the value at server side in php — Jatin Parmar, Apr 02 '19 at 08:55

Francis ask question · Answer 1 · 2019-04-02T09:06:57.280

Sorry for the first answer.

Well if you want to use customize select then use JavaScript to get the data. Normally only input tags select can be post or send automatically by form tag.

The submit button triggers a JavaScript function then get the value of the selected div then create a input tag containing the value of the div. Ex:

<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();
}

This seems to be a cheat but hope this helps.

score 0 · Accepted Answer · answered Apr 02 '19 at 08:58

0

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'))

answered Apr 02 '19 at 08:58

bato3

2,109
1
13
22

score 0 · Answer 3 · answered Apr 02 '19 at 08:58

There is lot of content available online explaining a lot of ways to implement this kind of a behavior.

One such link -

For more ways of implementation you can google with these key words -

Ajax calls
Submitting form with hidden input fields
How to build and submit Form using FormData. etc

How can I get a value from a personalized dropdown?

3 Answers3