如何在Laravel中用jQuery点击下拉菜单时获取行内li的SKUID值

首先看一下你的视图实际效果：

你的视图代码（原代码存在HTML结构问题和元素标识问题）：

@foreach($liveValues as $live) <tbody role="alert"> <td> <ul> SKU:<li id="skuvalue" > {{$live->SKUID}}</li> </ul> </td> <div class="btn-group"> <button type="button" class="btn btn-default editSellingAttributes" data-toggle="modal" data-target="" data-id="{{$live->SKUID}}">Edit Selling Attributes</button> <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="{{url('editCatalogue')}}">Edit Catalogue</a></li> <li><a href="#">Archieve Listing</a></li> </ul> </div> </tbody> @endforeach

你的需求是：点击每行的「Archieve Listing」选项时，获取当前行的skuid值，但现有脚本弹窗显示0，无法正确获取。

现有脚本：

<script type="text/javascript"> $(document).ready(function(){ var liveSKUID=$("#skuvalue").val(); alert(liveSKUID); }); </script>

问题出在哪？ #

1. 重复的ID：循环中所有<li>的id都是skuvalue，HTML规范中id必须唯一，所以$("#skuvalue")只会选中页面中第一个该id的元素，无法对应到点击的行。
2. 错误的取值方式：<li>标签没有value属性，用.val()根本拿不到SKU值，就算改成.text()，也只能拿到第一个元素的内容。
3. 未绑定点击事件：你现在的脚本是页面加载就执行，不是点击归档按钮时触发，而且没有把SKU和对应的归档按钮关联起来。
4. HTML结构错误：<tbody>内部只能包含<tr>，你直接在<tbody>里放<div>是不符合规范的，会导致DOM结构异常，也会影响元素选择。

修正方案 #

第一步：修正视图代码（修复结构+关联SKU到归档按钮）

把循环内的HTML结构调整为符合规范的表格结构，同时给「Archieve Listing」的链接加上专属class和data-skuid属性，直接把当前行的SKU绑定到按钮上：

@foreach($liveValues as $live)
<tr role="alert">
    <td>
        <ul>
            SKU:<li>{{$live->SKUID}}</li>
        </ul>
    </td>
    <td>
        <div class="btn-group">
            <button type="button" class="btn btn-default editSellingAttributes" data-toggle="modal" data-target="" data-id="{{$live->SKUID}}">Edit Selling Attributes</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="{{url('editCatalogue')}}">Edit Catalogue</a></li>
                <!-- 给归档链接加class和data属性 -->
                <li><a href="#" class="archive-listing" data-skuid="{{$live->SKUID}}">Archieve Listing</a></li>
            </ul>
        </div>
    </td>
</tr>
@endforeach

第二步：修改脚本代码（绑定点击事件+正确获取SKU）

给所有归档按钮绑定点击事件，点击时直接从当前按钮的data-skuid属性中获取对应的SKU：

<script type="text/javascript">
$(document).ready(function(){
    // 给所有归档链接绑定点击事件
    $('.archive-listing').on('click', function(e){
        e.preventDefault(); // 阻止默认的跳转行为（因为href是#）
        var liveSKUID = $(this).data('skuid'); // 获取当前链接的SKU值
        alert(liveSKUID);
        
        // 这里可以添加后续的归档逻辑，比如发送AJAX请求到后端
        // $.ajax({
        //     url: '/your-archive-url',
        //     method: 'POST',
        //     data: { skuid: liveSKUID },
        //     // ...其他参数
        // });
    });
});
</script>

这样修改后，点击任意行的「Archieve Listing」，就能正确弹出当前行的SKUID了。

内容的提问来源于stack exchange，提问作者user8268872