私はドロップダウンメニューとテキストボックスがある、次のリンクのコードを持っています。 ドロップダウンから選択したオプションに応じてテーブルを表示するjavascriptがあります。 ユーザーがドロップダウンから選択すると、テキストボックスに入力して要求された情報を取得できるように、検索ボックスを追加しようとしています。 私の現在のjavascriptコードをどこから始めるべきですか？ ありがとう！JavaScriptのドロップダウンメニューに基づいて検索
https://fiddle.jshell.net/s5ftvgmx/3/
私はあなたがhttps://fiddle.jshell.net/s5ftvgmx/14/
$(document).ready(function() {
function addRemoveClass(theRows) {
theRows.removeClass("odd even");
theRows.filter(":odd").addClass("odd");
theRows.filter(":even").addClass("even");
}
$(document).on('keyup','#myInput',function(){
\t \t \t \t var selected = $("#selectField").val();
var search=$("#myInput").val();
search=search.toLowerCase();
$('tr[id!="HeadRow"]').hide();
$('tr[id!="HeadRow"]').each(function(){
var obj=$(this);
var productName=obj.first('td').html();
productName=productName.toLowerCase();
if(productName.search(search)>=0)
{
if(selected!= "All")
{
if(obj.attr('position')==selected)
{
obj.show();
}
}else{
obj.show();
}
}
});
});
var rows = $("table#myTable tr:not(:first-child)");
addRemoveClass(rows);
$("#selectField").on("change", function() {
var selected = this.value;
if (selected != "All") {
rows.filter("[position=" + selected + "]").show();
rows.not("[position=" + selected + "]").hide();
var visibleRows = rows.filter("[position=" + selected + "]");
addRemoveClass(visibleRows);
} else {
rows.show();
addRemoveClass(rows);
}
});
});<script
\t \t \t src="https://code.jquery.com/jquery-3.1.1.min.js"
\t \t \t integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
\t \t \t crossorigin="anonymous"></script>
<title>Filter Table</title>
<body>
<div class="optionsDiv">
Filter By Position
<select id="selectField">
<option value="All" selected>All</option>
<option value="Student">Student</option>
<option value="Assistant">Assistant</option>
<option value="Professor">Professor</option>
<br> <input type="text" id="myInput" placeholder="Search">
</select>
</div>
<table id="myTable">
<tr id="HeadRow">
<td>First Name</td>
<td>Last Name</td>
<td>Age</td>
<td>Position</td>
</tr>
<tr position="Student">
<td>John</td>
<td>John's Last name</td>
<td>25</td>
<td>Student</td>
</tr>
<tr position="Assistant">
<td>Timmy</td>
<td>Timmy's Last name</td>
<td>22</td>
<td>Assistant</td>
</tr>
<tr position="Professor">
<td>Billy</td>
<td>Billy's Last name</td>
<td>40</td>
<td>Professor</td>
</tr>
<tr position="Professor">
<td>Eddy</td>
<td>Eddy's Last name</td>
<td>35</td>
<td>Professor</td>
</tr>
<tr position="Professor">
<td>Emma</td>
<td>Emma's Last name</td>
<td>38</td>
<td>Professor</td>
</tr>
<tr position="Student">
<td>Emily</td>
<td>Emily's Last name</td>
<td>20</td>
<td>Student</td>
</tr>
<tr position="Assistant">
<td>Jack</td>
<td>Jack's Last name</td>
<td>30</td>
<td>Assistant</td>
</tr>
<tr position="Student">
<td>Robert</td>
<td>Robert's Last name</td>
<td>20</td>
<td>Student</td>
</tr>
<tr position="Assistant">
<td>Danny</td>
<td>Danny's Last name</td>
<td>37</td>
<td>Assistant</td>
</tr>
<tr position="Professor">
<td>Erick</td>
<td>Erick's Last name</td>
<td>42</td>
<td>Professor</td>
</tr>
</table>
</body>