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

Question

View Code:

 @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

This is laravel view where I have listed many skuid values fetched from db. Also next to this I have listed a dropdown menu with Edit Catalogue and Archieve Listing. On clicking with the archieve listing I need to fetch the skuid listed in that row.

Script code:

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

This is the simple script i have tried but it alerts '0'.

Answer 1

You are querying an li, use .text() instead of .val()

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

You are generating a same markup each loop, causing multiple id=skuvalue which is invalid HTML. This means you cannot use $(#skuvalue) as that will always return the first match so you have to select it positional.

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

Also your sample markup is generating an invalid table, no tr or td around the rest of the data past the first td.

Assuming you have a valid HTML Table the below is an example how you might do it. If you only want the respons on clicking the specific li with the text Archieve Listing you need to give it an attribute or something to attach the click event to it.

You could go positional and assume the li is always in 2nd position but that's unreliable. As you generate the markup adding a data-id="archive" or similar shouldn't be a problem.

Ones you click on the relevant li you can go back up the DOM tree using jQuery closest('tr') to get to the current row. From there you use .find() on the matched tr to find the element with id=skuvalue. I used a attribute selector [id="skuvalue"] in the example below but I think .find('#skuvalue') should work too as you only search within the individual row's context.

$(".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>

</div>