Updating my webpage when a new value from a dropdown is selected-CodePudding

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 ?

CodePudding user response：

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');
});

CodePudding user response：

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');
});