Assume that I the following JS function which generates a table of number type inputs of the given number of rows and columns and displays it in the given div;
generate_table(3,3,'display_id')
I wish to have a dropdown to give the user a choice between 2 and 6 for the size of the matrix that they wish for the det(A) to be calculated. Up to this point I have used button to have a new input table to be generated. How can I make it so that the size of the table gets updated as a new value from the dropdown is selected ?
You can use the change method as eventlistener to run your function.
jQuery Solution something like this:
$('#yourSelectTag').on('change', function() {
var optionVal = $(this).val();
generate_table(optionVal,'display_id');
});
Or plain js:
document.getElementById('#yourSelectTag').addEventListener('change',function(){
var optionVal = this.value;
generate_table(optionVal,'display_id');
});
You can use a select dropdown.
<select class="form-control" id="select-element">
<option value="2-2">2 By 2</option>
<option value="2-3">2 By 3</option>
</select>
Assuming you are using jQuery.
$('#select-element').on('change', function() {
var value = $(this).val();
var matrix = value.split("-");
generate_table(matrix[0], matrix[1],'display_id');
});