Required attribute for drop-down using ul

Question

I need to make required for lists in jquery. I don't want to use a select tag for the dropdown.

$(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>

Here I need to select any one of the accounts from a dropdown and I wanted to make it as "required". After selecting any one of the options one needs to search.

Is there any function in jquery to make it as required?

Answer 1

As of my knowledge I don't think there is any predefined functions. You can go for some custom scripts. Check below snippet if you need such one.

$(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>

Answer 2

You can give link inside select option:

<select name="forma" onchange="location = this.value;">
  <option value="savings.html" id="id1">Savings</option>
  <option value="deemat.html" id="id2">Deemat</option>
  <option value="salary.html" id="id3">Salary</option>
</select>

SeeThisLink