Wednesday, 21 August 2013

jQuery replace button dropdown list with a label on click

jQuery replace button dropdown list with a label on click

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

No comments:

Post a Comment