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

对不起，第一个答案。

好吧，如果要使用定制选择，请使用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();
}

这似乎是个骗子，但希望能有所帮助。

Answer 2

只需添加<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 3

在线上有很多内容，解释了实现这种行为的许多方法。

一个这样的链接-

有关更多实现方式，您可以使用这些关键字在Google中搜索-

Ajax调用
提交带有隐藏输入字段的表单
如何使用FormData构建和提交表单。等等

如何从个性化下拉菜单中获得价值？

3 个答案: