A DataTable with Hidden Drop-down Select Menu
- Jamie Johnson
Jamie Johnson
August 30, 2022
It's been a few years since I wrote my last article about DataTables. I was posed with a question from a colleague about accessing the corresponding data from one drop-down select menu via another drop-down select menu on a DataTable. So, what if I want to select from one drop-down menu and yet grab the corresponding value of another drop-down menu? In the example below, I select a word, but I get the corresponding number. One does not see the number because I have hidden the number options.
| Number | Word |
|---|---|
It should show the corresponding number from the hidden dropdown in the yellow space above once a value is selected. Want to "check your work"? Just view the JSON file and the resulting highlight should show the correct number corresponding to the selected word.
Want the code? (Tip: Search for the word magic)
<script type="text/javascript" src="datatable/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="datatable/datatables.min.css"/>
<script type="text/javascript" src="datatable/datatables.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display datatable">
<thead>
<tr class="dropdown">
<td class="numero"></td>
<td class="palabra"></td>
</tr>
<tr>
<th class="numero">Number</th>
<td class="palabra">Word</td>
</tr>
</thead>
<tfoot style="display:table-header-group">
<tr>
<td id="numsmith" class="numero"></td><!-- id and class allow magic -->
<td id="wordsmith"></td><!-- id and class allow magic -->
</tr>
</tfoot>
<tbody id="itemsoutput">
</tbody>
</table>
<style type="text/css">
<!--
.dataTables_filter { position: relative; left: -40px; }
-->
</style>
<script type="text/javascript">
$(document).ready(function() {
var mesa = $('.datatable').DataTable( {
responsive: true,
"bAutoWidth": false, // toggle this depending on how wide you want the table
ajax: "http://tech.beacondeacon.com/words.txt",
columns: [
{ data: 'number' },
{ data: 'word' }
],
initComplete: function () { // After DataTable initialized
this.api().columns().every( function () {
/* use of [1,2,3] for second, third and fourth column. Leave blank - columns() - for all.
Multiples? Use columns[0,1]) for first and second, e.g. */
var column = this;
var select = $('<select><option value=""/></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} ); // this.api function
} //initComplete function
} );
} );
$( window ).resize(function() {
$('.datatable').removeAttr('style');
});
// start the magic
function highlight(msg){
$('#result').html(msg);
}
function magic(){
$('#wordsmith select').change(function(){
selidx=$("#wordsmith select option:selected").index();
$("#numsmith select").attr('id','nummenu');
mynum = document.getElementById('nummenu').options[selidx].value;
highlight('You selected '+$("#wordsmith select option:selected").val()+', which corresponds with number '+mynum+'.');
});
}
window.onload = function() {
$('#wordsmith').mouseover(function(){// click didn't work
magic();
});
}
// end the magic
</script>
<style type="text/css">
<!--
@media all and (min-width: 120px){
.tabular-row, .tabular-cell { display: block; }
}
@media all and (min-width: 769px){
.tabular-row{ display: table-row; }
.tabular-cell { display: table-cell; }
}
.numero, .sorting_1 { display: none; } /* magic */
#result { font-size: 2em; background: yellow; padding: 1em; } /* magic */
-->
</style>
<p id="result"> </p><!-- magic -->