This is my code I try to show which table matched with my list box such as when I choose AIX from listbox and press button I want to show table1 when i choose linux from listbox and press button i want to show table2 for example Can you help me how to write code for btton and choose table
Thank you
<select name="System" id="System" style="font: 20pt AngsanaUPC " onkeyup="showHint(this.value)">
<option value="" style="font: 25pt AngsanaUPC " >Choose system</option>
<option value="AIX" style="font: 25pt AngsanaUPC " >AIX</option>
<option value="LINUX" style="font: 25pt AngsanaUPC ">LINUX</option>
<option value="SOLARIS" style="font: 25pt AngsanaUPC ">SOLARIS</option>
</select>
<button type="submit" class="btn btn-primary" style="font: 20pt AngsanaUPC ">Submit</button></td>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
</table>//table 1...
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2" width="100%">
</table>//table 2....
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example3" width="100%">
</table>// table 3....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function clickMe(){
$("table").hide();
if($("#list").val()==="AIX"){
$("#table1").show();
}else if($("#list").val()==="LINUX"){
$("#table2").show();
}else if($("#list").val()==="SOLARIS"){
$("#table3").show();
}
}
</script>
</head>
<body>
<select id="list">
<option value="" style="font: 25pt AngsanaUPC " >Choose system</option>
<option value="AIX" style="font: 25pt AngsanaUPC " >AIX</option>
<option value="LINUX" style="font: 25pt AngsanaUPC ">LINUX</option>
<option value="SOLARIS" style="font: 25pt AngsanaUPC ">SOLARIS</option>
</select>
<br/>
<input type="button" id="submit" value="submit" onclick="javascript:clickMe()"/>
<br/>
<table id="table1" style="display:none;"><caption>Table 1</caption></table>
<br/>
<table id="table2" style="display:none;"><caption>Table 2</caption></table>
<br/>
<table id="table3" style="display:none;"><caption>Table 3</caption></table>
</body>
</html>
A more clever approach that removes need for id="#" and some need for hardcoded management.
Use data-attributes to more easily match content, with checks in place mostly for help debugging if matching element not found.
Also uses more jquery-style approach, with $.on('click',function(){}); rather than inline script tag (which can be a pain to manage as site grows larger)
https://api.jquery.com/click/ (shorthand/convenience function)
https://api.jquery.com/data/#data-html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// A $( document ).ready() block.
$( document ).ready(function() {
$("#submit").click(function(){
// hide all switchable-tables
$(".switchable-table").hide();
// store ref to list element
var $list = $("#list");
// attempt to find the targetted table
var $table = $(".switchable-table[data-switch-id='"+$list.val()+"']");
// if found, show it
if($table.length)
{
$table.show();
}
// For debug only, can be disabled in production code
else if($list.val() != "")
{
console.error("no such table with matching data-switch-id as '"+$list.val()+"'", $list);
}
});
});
</script>
<style type='text/css'>
.switchable-table{ display:none; }
</style>
</head>
<body>
<div style='width:auto;margin:10px auto;'>
<select id="list">
<option value="" style="font: 25pt AngsanaUPC " >Choose system</option>
<option value="AIX" style="font: 25pt AngsanaUPC " >AIX</option>
<option value="LINUX" style="font: 25pt AngsanaUPC ">LINUX</option>
<option value="SOLARIS" style="font: 25pt AngsanaUPC ">SOLARIS</option>
</select>
<input type="button" id="submit" value="submit"/>
</div>
<br/>
<table class="switchable-table" data-switch-id="AIX" ><caption>Table 1</caption></table>
<table class="switchable-table" data-switch-id="LINUX"><caption>Table 2</caption></table>
<table class="switchable-table" data-switch-id="SOLARIS"><caption>Table 3</caption></table>
</body>
</html></div>