jQuery替换按钮下拉列表，单击时带有标签

时间：2013-08-21 14:31:43

标签： javascript jquery

我有一个带有按钮下拉列表的表作为每行中的一列。当用户从下拉列表中选择时，我希望下拉列表替换为反映他们所做选择的标签。我有这个工作，但它只会在第一个下拉列表中。

除了不同的行号外，每行都与此相同：

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


  });

我宁愿不必为页面上的每个下拉列表创建单独的JS语句集。示例：将#MACdropdown更改为#MACdropdown1等并制作单独的功能。

查看小提琴获取更多信息：http://bootply.com/75941

4 个答案:

答案 0 :(得分：3)

您应该使用其类而不是ID来引用每个下拉列表，如您所知，ID必须是唯一的。如果您多次重复上述代码，您仍然只会在第一个下拉列表中添加。

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


  });

如你所见，我根本不使用ID。每个select都行为相同，它的子控件只影响他（你也可以使用父选择器而不是最接近（'。MACDropdown'）但我选择了后者，以防你改变你的布局。

答案 1 :(得分：0)

编辑：将您的ID更改为类并使用以下内容。使用重复的id将意味着当在选择器中使用时，它将只选择它找到的第一个元素，类选择器将选择具有该类的所有项。在每个onclick函数中，然后在进行更改之前使用'this'来引用自身。

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


});

答案 2 :(得分：0)

每页每个元素只有一个id。改为使用类。

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>

答案 3 :(得分：0)

在一个页面中，你不能使用相同的css id，如果使用它将只选择第一个出现的id。

  

为每行使用唯一类。像这样更改代码..和

     

使用唯一ID来下拉链接。然后我们才能找到，   单击哪一行按钮（也是id的增量）

   <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>

在你的js，onclick下拉列表中，提取最后一个数字字段，然后使用该数值更新下拉列表。

相关问题
最新问题