jQuery replace button dropdown list with a label on click

Question

I have a table with a button dropdown list as a column in each row. When the users selects from the dropdown I want the dropdown to be replaced by a label that reflects the selection they have made. I have this working but it will only on the first dropdown list.

The rows are each identical to this, except different row numbers:

<tr>
      <td>1.</td>
      <td>
        <!-- Single button -->
        <div class="btn-group" id="MACdropdown">
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a id="move" href="#">Move Assets</a></li>
            <li><a id="swap" href="#">SWAP Assets</a></li>
            <li><a id="add" href="#">Add Assets</a></li>
            <li><a id="cancel" href="#">Cancel Assets</a></li>
            <li><a id="change" href="#">Change Assets</a></li>
            <li class="divider"></li>
            <li><a href="#">Entire Site Move</a></li>
          </ul>
        </div>

      </td>
      <td>4534-23423</td>
      <td>123-234</td>
      <td>346</td>
      </tr>

JS:

$(document).ready(function(){

    $("#MACdropdown").on('click' , 'a#move' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>');
        })
    $("#MACdropdown").on('click' , 'a#swap' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">SWAP</span></a>');
        })
    $("#MACdropdown").on('click' , 'a#add' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">ADD</span></a>');
        })
    $("#MACdropdown").on('click' , 'a#cancel' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CANCEL</span></a>');
        })
    $("#MACdropdown").on('click' , 'a#change' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CHANGE</span></a>');
    })


  });

I would rather not have to make separate sets of JS statements for each dropdown list on the page. Example: changing #MACdropdown to #MACdropdown1 etc. and making separate functions.

Check out the Fiddle for more info: http://bootply.com/75941

use class selector instead of the id selector

user1
– user1

2013-08-21 14:38:11 +00:00
Commented Aug 21, 2013 at 14:38 — user1
– user1, Commented Aug 21, 2013 at 14:38

ffflabs · Accepted Answer · 2013-08-21 14:40:47Z

3

You should refer to each dropdown using its class rather than the ID which, as you know, must be unique. IF you repeat the above code several times, you'll still be adressing only the first dropdown .

HTML:

    <tr>
      <td>1.</td>
      <td>
        <!-- Single button -->
        <div class="btn-group" class="MACdropdown" id="MACdropdown1">
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="move" href="#">Move Assets</a></li>
            <li><a class="swap" href="#">SWAP Assets</a></li>
            <li><a class="add" href="#">Add Assets</a></li>
            <li><a class="cancel" href="#">Cancel Assets</a></li>
            <li><a class="change" href="#">Change Assets</a></li>
            <li class="divider"></li>
            <li><a href="#">Entire Site Move</a></li>
          </ul>
        </div>

      </td>
      <td>4534-23423</td>
      <td>123-234</td>
      <td>346</td>
      </tr>

JS:

$(document).ready(function(){

    $(".MACdropdown").on('click' , 'a.move' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>');
        })
    $(".MACdropdown").on('click' , 'a.swap' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">SWAP</span></a>');
        })
    $(".MACdropdown").on('click' , 'a.add' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">ADD</span></a>');
        })
    $(".MACdropdown").on('click' , 'a.cancel' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CANCEL</span></a>');
        })
    $(".MACdropdown").on('click' , 'a.change' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CHANGE</span></a>');
    })


  });

As you see, I'm not using ids at all. Each select behaves the same, and its children controls just affect him (you could also use the parent selector instead of closest('.MACDropdown') but I chose the latter in case you change a bit your layout.

answered Aug 21, 2013 at 14:40

ffflabs

17.6k5 gold badges57 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steve W. Over a year ago

Works perfect I tried using classes, I know IDs are unique but when I would make the selection it would change all the .MACdropdown on the page. The addition of closest worked perfectly, I forgot about .parent too!

Richard Raby Over a year ago

I'm not sure parent would do it, as 'this' refers to the clicked anchor element, parent would select it's <li> tag if I'm correct.

ffflabs Over a year ago

@RichardRaby I meant parent().parent().parent() (repeat until you reach the wanted element. That leaves you tied to yout current layout)

Steve W. Over a year ago

Now get this to try and work once I add a row to the table when the plus sign is clicked. bootply.com/75955

ffflabs Over a year ago

In that case you should delegate the listener to it's parent container. For example: $(document).on('click' , '.MACdropdown a.move' , function(){ $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>'); })

Richard Raby · Accepted Answer · 2013-08-21 14:36:23Z

0

EDIT: Change your id's to classes and use the following. Using duplicate id's will mean when used in a selector, it will just select the first element it finds, a class selector will select all items with that class. Inside each onclick function, it then uses 'this' to refer to itself before making the change.

$(document).ready(function(){

    $(".MACdropdown").on('click' , 'a#move' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>');
    })
    $(".MACdropdown").on('click' , 'a#swap' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">SWAP</span></a>');
    })
    $(".MACdropdown").on('click' , 'a#add' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">ADD</span></a>');
    })
    $(".MACdropdown").on('click' , 'a#cancel' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CANCEL</span></a>');
    })
    $(".MACdropdown").on('click' , 'a#change' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CHANGE</span></a>');
    })


});

answered Aug 21, 2013 at 14:36

Richard Raby

1066 bronze badges

2 Comments

Steve W. Over a year ago

This only replaces the anchor tag within the li, I need the whole div.MACdropdown to be replaced.

Richard Raby Over a year ago

Amenadiel's answer should do it. 'this' must reference the clicked link, so you want to navigate from there upwards to the dropdown control before replacing it (my answer was posted in haste, apologies).

carter · Accepted Answer · 2013-08-21 14:41:52Z

Only one id per element per page. Use classes instead.

jQuery:

$(document).ready(function(){

        $(".MACdropdown").on('click' , 'a#move' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>');
            })
        $(".MACdropdown").on('click' , 'a#swap' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">SWAP</span></a>');
            })
        $(".MACdropdown").on('click' , 'a#add' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">ADD</span></a>');
            })
        $(".MACdropdown").on('click' , 'a#cancel' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CANCEL</span></a>');
            })
        $(".MACdropdown").on('click' , 'a#change' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CHANGE</span></a>');
        })


      });

HTML:

<table class="table table-striped">
<tbody><tr>
          <td>1.</td>
          <td>
            <!-- Single button -->
            <div class="btn-group" class="MACdropdown">
              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
              Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a id="move" href="#">Move Assets</a></li>
                <li><a id="swap" href="#">SWAP Assets</a></li>
                <li><a id="add" href="#">Add Assets</a></li>
                <li><a id="cancel" href="#">Cancel Assets</a></li>
                <li><a id="change" href="#">Change Assets</a></li>
                <li class="divider"></li>
                <li><a href="#">Entire Site Move</a></li>
              </ul>
            </div>

          </td>
          <td>4534-23423</td>
          <td>123-234</td>
          <td>346</td>
  </tr>
  <tr>
          <td>2.</td>
          <td>
            <!-- Single button -->
            <div class="btn-group" class="MACdropdown">
              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
              Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a id="move" href="#">Move Assets</a></li>
                <li><a id="swap" href="#">SWAP Assets</a></li>
                <li><a id="add" href="#">Add Assets</a></li>
                <li><a id="cancel" href="#">Cancel Assets</a></li>
                <li><a id="change" href="#">Change Assets</a></li>
                <li class="divider"></li>
                <li><a href="#">Entire Site Move</a></li>
              </ul>
            </div>

          </td>
          <td>4534-23423</td>
          <td>123-234</td>
          <td>346</td>
  </tr>
  <tr>
          <td>3.</td>
          <td>
            <!-- Single button -->
            <div class="btn-group" class="MACdropdown">
              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
              Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a id="move" href="#">Move Assets</a></li>
                <li><a id="swap" href="#">SWAP Assets</a></li>
                <li><a id="add" href="#">Add Assets</a></li>
                <li><a id="cancel" href="#">Cancel Assets</a></li>
                <li><a id="change" href="#">Change Assets</a></li>
                <li class="divider"></li>
                <li><a href="#">Entire Site Move</a></li>
              </ul>
            </div>

          </td>
          <td>4534-23423</td>
          <td>123-234</td>
          <td>346</td>
  </tr>
</tbody></table>

Raj Adroit · Accepted Answer · 2013-08-21 14:46:30Z

In a page, you can't use same css id , if you use it will select only first occur id.

use unique class for each rows. change the code like this.. and

use unique id's to drop down links also., then only we can find, which row buttion is clicked (increment that id's too )

   <tr>
      <td>1.</td>
      <td>
        <!-- Single button -->
        <div class="btn-group" id="MACdropdown_1"> // should increment for each row
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a id="move_1" href="#">Move Assets</a></li> 
            <li><a id="swap_1" href="#">SWAP Assets</a></li>
            <li><a id="add_1" href="#">Add Assets</a></li>
            <li><a id="cancel_1" href="#">Cancel Assets</a></li>
            <li><a id="change_1" href="#">Change Assets</a></li>
            <li class="divider"></li>
            <li><a href="#">Entire Site Move</a></li>
          </ul>
        </div>

      </td>
      <td>4534-23423</td>
      <td>123-234</td>
      <td>346</td>
      </tr>

On your js, onclick dropdown, extract the last numeric field, then update dropdown with that numeric value.

Collectives™ on Stack Overflow

jQuery replace button dropdown list with a label on click

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related