javascript - 使用 ul 下拉菜单所需的属性

Question

我需要为 jquery 中的列表设置必需的。我不想对下拉列表使用选择标签。

$(document).ready(function(e) {

  $('.search-panel .dropdown-menu').find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).attr("href").replace("#", "");
    var concept = $(this).text();
    $('.search-panel span#search_concept').text(concept);
    $('.input-group #search_param').val(param);
  });
});

input.form-control {
  border: transparent;
  border-left: 2px solid #f2f2f2;
}

span.input-group-btn {
  width: inherit;
}

.input-group-btn {
  width: inherit;
}

.input-group {
  margin: auto;
}

span#search_concept {
  margin-right: 8px;
  color: #7ec674;
}

.input-group {
  box-shadow: 0px 24px 46px 0px rgba(0, 0, 0, 0.05);
}

.search_container.vertical-align-content {
  margin-top: 120px;
}

i.glyphicon.glyphicon-search {
  padding-left: 5px;
  padding-right: 5px;
}

span#search {
  padding-right: 10px;
}

.btn:focus,
.btn:active {
  outline: none !important;
}

.input-group-btn.search-panel,
input.form-control {}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
  height: 6vh;
  border-radius: 0;
}

.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
  height: 6vh;
  z-index: 2;
}

button.btn.btn-default.dropdown-toggle {
  height: 6vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="POST" action="/searchresults">
  <div class="input-group">
    <div class="input-group-btn search-panel">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span id="search_concept">Filter by</span> <span class="caret text-muted"></span>
        </button>
      <ul class="dropdown-menu" id="select" role="menu">
        <li><a href="#savings">Savings</a></li>
        <li><a href="#deemat">DEEMAT</a></li>
        <li><a href="#salary">Salary</a></li>

      </ul>
    </div>
    <input type="hidden" name="search_param" value="all" id="search_param">
    <input type="text" class="form-control" id="field" name="field" placeholder="Type your query here." required>
    <span class="input-group-btn">
    <button class="btn" id="submit" type="submit" value="Validate!">
    <i class="glyphicon glyphicon-search" aria-hidden="true"></i> <span
    id="search">Search</span>
    </button>
    </span>
  </div>

在这里，我需要从下拉列表中选择任何一个帐户，并且我想将其设置为“必需”。选择任一选项后，需要进行搜索。

jquery中有没有函数可以实现要求的功能？

Answer 1

据我所知，我不认为有任何预定义的函数。您可以使用一些自定义脚本。如果您需要这样的代码，请检查下面的代码片段。

$(document).ready(function(e) {

  $('.search-panel .dropdown-menu').find('a').click(function(e) {  
    e.preventDefault();
    var param = $(this).attr("href").replace("#", "");
    var concept = $(this).text();
    $('.search-panel span#search_concept').text(concept);
    $('.input-group #search_param').val(param);
    $('#search_concept').removeAttr('style');
  });
  
  $('#submit').click(function(e){
    var ddValue = $('#search_concept').text();
    if(ddValue.toLowerCase() === 'filter by'){
      console.log('select filter');
      $('#search_concept').css('color','red');
      e.preventDefault();
    }
  });
  
});

input.form-control {
  border: transparent;
  border-left: 2px solid #f2f2f2;
}

span.input-group-btn {
  width: inherit;
}

.input-group-btn {
  width: inherit;
}

.input-group {
  margin: auto;
}

span#search_concept {
  margin-right: 8px;
  color: #7ec674;
}

.input-group {
  box-shadow: 0px 24px 46px 0px rgba(0, 0, 0, 0.05);
}

.search_container.vertical-align-content {
  margin-top: 120px;
}

i.glyphicon.glyphicon-search {
  padding-left: 5px;
  padding-right: 5px;
}

span#search {
  padding-right: 10px;
}

.btn:focus,
.btn:active {
  outline: none !important;
}

.input-group-btn.search-panel,
input.form-control {}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
  height: 6vh;
  border-radius: 0;
}

.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
  height: 6vh;
  z-index: 2;
}

button.btn.btn-default.dropdown-toggle {
  height: 6vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="POST" action="/searchresults">
  <div class="input-group">
    <div class="input-group-btn search-panel">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span id="search_concept">Filter by</span> <span class="caret text-muted"></span>
        </button>
      <ul class="dropdown-menu" id="select" role="menu">
        <li><a href="#savings">Savings</a></li>
        <li><a href="#deemat">DEEMAT</a></li>
        <li><a href="#salary">Salary</a></li>

      </ul>
    </div>
    <input type="hidden" name="search_param" value="all" id="search_param">
    <input type="text" class="form-control" id="field" name="field" placeholder="Type your query here." required>
    <span class="input-group-btn">
    <button class="btn" id="submit" type="submit" value="Validate!">
    <i class="glyphicon glyphicon-search" aria-hidden="true"></i> <span
    id="search">Search</span>
    </button>
    </span>
  </div>