repl.it
@Hariz_Hazril/

🏫School Project - Combination Of 2 Menu into 1 Input

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • script.js
  • style.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<input type="text" id="search" placeholder="Type to search">
<table id="table">
	 <tr>
      <td>IC</td>
      <td>KELAS</td>
			<td>IC1</td>
      <td>KELAS1</td>
			<td>IC3</td>
      <td>KELAS3</td>
   </tr>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>
<script>
var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});
</script>
<p id="demo"></p>
<select name='type' id='type'>
<select name="art_type">
    <option value="ra">Research Article</option>
    <option value="rea">Review Article</option>
    <option value="re">Reviews</option>
    <option value="op">Opinions</option>
    <option value="le">Letters to the Editor</option>
</select>

<input style="border: none;" type="text" id="get_id_val" value="">
</select>
<script>
	$("#type").change(function(){
  var id = $(this).find("option:selected").attr("id");
var day;
  switch (id){
    case "trade_buy_max":
       day = "Saturday";
      break;
  }
	document.getElementById("demo").innerHTML = "Today is " + day;
});
</script>
  </body>
</html>
result
console