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>

1.
行动









4534-23423
123-234
346

JS:

$（文档）.ready（函数（）{
$（“#MACdropdown”）。在（'click'，'a#move'，function（）上{
$（“#MACdropdown”）。替换为（“”）；
})
$（“#MACdropdown”）。在（'click'，'a#swap'，function（）上{
$（“#MACdropdown”）。替换为（“”）；
})
$（“#MACdropdown”）。在（'click'，'a#add'，function（）上{
$（“#MACdropdown”）。替换为（“”）；
})
$（“#MACdropdown”）。在（'单击'，'取消'，函数（）上{
$（“#MACdropdown”）。替换为（“”）；
})
$（“#MACdropdown”）。在（'click'，'a#change'，function（）上{
$（“#MACdropdown”）。替换为（“”）；
})
});

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

---

查看小提琴以了解更多信息：

编辑：将您的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>');
    })


});

$（文档）.ready（函数（）{
$（.MACdropdown”）。在（'click'，'a#move'，function（）上{
$（此）。替换为（“”）；
})
$（“.MACdropdown”）。在（'click'，'a#swap'，function（）上{
$（此）。替换为（“”）；
})
$（“.MACdropdown”）。在（'click'，'a#add'，function（）上{
$（此）。替换为（“”）；
})
$（.MACdropdown”）。在（'click'，'a#cancel'，function（）上{
$（此）。替换为（“”）；
})
$（“.MACdropdown”）。在（'click'，'a#change'，function（）上{
$（此）。替换为（“”）；
})
});

编辑：将您的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>');
    })


});

$（文档）.ready（函数（）{
$（.MACdropdown”）。在（'click'，'a#move'，function（）上{
$（此）。替换为（“”）；
})
$（“.MACdropdown”）。在（'click'，'a#swap'，function（）上{
$（此）。替换为（“”）；
})
$（“.MACdropdown”）。在（'click'，'a#add'，function（）上{
$（此）。替换为（“”）；
})
$（.MACdropdown”）。在（'click'，'a#cancel'，function（）上{
$（此）。替换为（“”）；
})
$（“.MACdropdown”）。在（'click'，'a#change'，function（）上{
$（此）。替换为（“”）；
})
});

您应该使用其类而不是ID来引用每个下拉列表，正如您所知，ID必须是唯一的。如果将上述代码重复几次，仍然只能处理第一个下拉列表

HTML:

1.
行动









4534-23423
123-234
346

JS:

$（文档）.ready（函数（）{
$（.MACdropdown”）。在（'click'，'a.move'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
$（.MACdropdown”）。在（'click'，'a.swap'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
$（.MACdropdown”）。在（'click'，'a.add'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
$（.MACdropdown”）。在（'click'，'a.cancel'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
$（“.MACdropdown”）。在（'click'，'a.change'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
});

---

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

你应该使用它的类而不是ID来引用每个下拉列表，正如你所知道的，ID必须是唯一的。如果你重复上面的代码几次，你仍然只会处理第一个下拉列表

HTML:

1.
行动









4534-23423
123-234
346

JS:

$（文档）.ready（函数（）{
$（.MACdropdown”）。在（'click'，'a.move'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
$（.MACdropdown”）。在（'click'，'a.swap'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
$（.MACdropdown”）。在（'click'，'a.add'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
$（.MACdropdown”）。在（'click'，'a.cancel'，function（）上{
$（this）.最近（'.MACdropdown'）。替换为（''）；
})
    <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>

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


  });

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


      });

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

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