Show different values in a table - JS/Html

Asked

Viewed 48 times

1

I am 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:

http://jsfiddle.net/onury/kBQdS/

The table is updated via 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 the table values being changed by button, would you like it to be changed by a dropdown? Can someone help me tell a function that would do that?

Thank you,

javascript

2 answers

1


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

You can use the event change instead of click boot.

Then you check which value was chosen, and call the method you need. is the part of switch in 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>

  • Andre, it worked out and everything. Inside this form I’m making there are some more codes that end up updating the page. And every time he updates, he loses the information of which item was selected. Is there any way when the person selects it to stay fixed?

  • depends on how the page is updated... my suggestion is to put your entire code in a new question, so both I and other users can see the whole and we can suggest you the best solution.

0

Just pass the defined ids on the link of 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: http://jsfiddle.net/kBQdS/242/

I hope I’ve helped!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.