ulを使用したドロップダウンに必要な属性

Question

jqueryのリストに必須である必要があります。ドロップダウンにselectタグを使用したくありません。ここで

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

私は、ドロップダウンリストからアカウントのいずれかを選択する必要があると私は「必要」としてそれを作りたかったです。 1つのオプションを選択した後、検索する必要があります。

必要に応じて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