如何使用 jquery 在 laravel 中单击下拉菜单获取 li 的值？

Question

查看代码：

 @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

这是 laravel 视图，我在其中列出了许多从数据库中获取的 skuid 值。在此旁边，我还列出了一个下拉菜单，其中包含“编辑目录”和“存档列表”。单击存档列表时，我需要获取该行中列出的 skuid。

脚本代码：

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

这是我试过的简单脚本，但它会提示“0”。

Answer 1

您正在查询 li，请使用 .text() 而不是 .val()

$(document).ready(function(){
    var liveSKUID=$("#skuvalue").text();
    alert(liveSKUID);
})

您在每个循环中生成相同的标记，导致多个 id=skuvalue 无效 HTML。这意味着你不能使用 $(#skuvalue) 因为它总是 return 第一个匹配所以你必须 select 它的位置。

I would recommend to use data-id instead as you otherwise have multiple duplicates of a unique id

此外，您的示例标记在第一个 td.[=35= 之后的其余数据周围生成无效的 table，没有 tr 或 td ]

假设您有一个有效的 HTML Table，下面是您可以如何操作的示例。如果您只想要点击带有文本 Archieve Listing 的特定 li 的响应，您需要给它一个属性或其他东西以将点击事件附加到它。

您可以调整位置并假设 li 始终处于第二位置，但这是不可靠的。当您生成标记时，添加 data-id="archive" 或类似的应该不是问题。

点击相关 li 后，您可以使用 jQuery closest('tr') 返回 DOM 树以到达当前行。从那里，您可以在匹配的 tr 上使用 .find() 来查找具有 id=skuvalue 的元素。我在下面的示例中使用了 select 或 [id="skuvalue"] 属性，但我认为 .find('#skuvalue') 也应该有效，因为您只在单个行的上下文中搜索。

$(".dropdown-menu [data-id=archive]").on('click', function() {
  var x = $(this).closest('tr').find('[id=skuvalue]').text();
  alert(x);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody role="alert">
    <tr>
      <td>
        <ul>
          SKU:
          <li id="skuvalue">5</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="#">Edit Catalogue</a></li>
            <li><a data-id="archive" href="#">Archieve Listing</a></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          SKU:
          <li id="skuvalue">78</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="#">Edit Catalogue</a></li>
            <li><a data-id="archive" href="#">Archieve Listing</a></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          SKU:
          <li id="skuvalue">987</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="#">Edit Catalogue</a></li>
            <li><a data-id="archive" href="#">Archieve Listing</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
  <table>

Answer 2

所以在这里，当您根据 $liveValue 的计数获取类似的 li 时。您需要做的第一件事是 id = skuvalue 将不起作用，因为 id's 用于整个页面中的单个值或单个元素。所以我们需要 class 而不是 id

其次，我注意到您正在使用 val() 并且在您的 html 中没有 value attribute 设置为任何 li。如果您正在寻找 li 的 text。您将使用 text() 而不是 val()

使用相同 Class :

var inputs = $(".something");
for(var i = 0; i < inputs.length; i++){
    alert($(inputs[i]).text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class = "something" value ="ok">
    hi
  </li>
   <li class = "something">
    is
  </li>
   <li class = "something">
    going to
  </li>
   <li class = "something">
    happen
  </li>
</ul>

但是如果你想使用 id

使用 ID 并单击元素

$("#myid li").click(function() {
    alert($(this).text()); // gets text contents of clicked li
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='myid'>
  <li id='1'>skuID 1</li>
  <li id='2'>skuID 2</li>
  <li id='3'>skuID 3</li>
  <li id='4'>skuID 4</li>
  <li id='5'>skuID 5</li>
</ul>

如何使用 jquery 在 laravel 中单击下拉菜单获取 li 的值？

How to get the value of li on dropdown menu click in laravel using jquery?

javascript

php

jquery

laravel-5.4