使用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>

Answer 2

你可以给链接选择选项里面：

<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