Show different values in a table - JS / Html

Question

Show different values in a table - JS / Html

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm trying to show different tables according to what the user chooses. I have an example of a user who shared his code through the link:

link

The table is updated using the buttons below:

$('#btn-load').click(function(e) {
    dt.load(data1);
});

$('#btn-update').click(function(e) {
    dt.load(data2);
});

$('#btn-append').click(function(e) {
    dt.load(data1, true);
});

$('#btn-clear').click(function(e) {
    dt.clear();
});

However, my question is exactly why instead of table values being changed by button, would you like it to be changed by a dropdown? Can anyone help me tell me a function that would do this?

Thanks,

javascript

asked by anonymous 30.03.2017 / 23:35

2 answers

0

Just pass the ids defined in the link for each function:

HTML

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a id="btn-load" href="#">Load list</a>
    <a id="btn-update" href="#">Load List 2</a>
    <a id="btn-append" href="#">Append List 1</a>
    <a id="btn-clear" href="#">Clear list</a>
  </div>
</div>

CSS

/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

Simulation: link

I hope I have helped!

30.03.2017 / 23:53

Error connecting to PostgreSQL by pgAdmin 4 what problem, I can not pass the list to the other function?

score 1 · Accepted Answer

Having selected your dropdown:
Ex: $('#ddl-meu')

You can use the event change instead of click of the button.

Then you check the value that was chosen, and call the method you need. is the switch part of the code.

$('#ddl-meu').change(function() {

  switch(this.value) {
    case "data1":
        dt.load(data1);
        break;
    case "data2":
        dt.load(data2);
        break;
    case "data1append":
        dt.load(data1, true);
        break;
    case "clear":
        dt.clear(data2);
        break;
    default:
  }

});

<select id="ddl-meu">
  <option value="data1">Data 1</option>
  <option value="data2">Data 2</option>
  <option value="data1append">Data 1 append</option>
  <option value="clear">Clear</option>
</select>