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

问题描述：

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

查看代码： strong> p>

  @foreach（$ liveValues as $ live）
＆lt; tbody role =“alert”＆gt; 
＆lt; td＆gt; 
＆lt; ul＆gt; 
 SKU  ：＆lt; li id =“skuvalue”＆gt;  {{$ live-＆gt; SKUID}}＆lt; / li＆gt; 
＆lt; / ul＆gt; 
＆lt; / td＆gt; 
＆lt; div class =“btn-group”＆gt; 
＆lt; button type =  “button”class =“btn btn-default editSellingAttributes”
 data-toggle =“modal”data-target =“”data-id =“{{$ live-＆gt; SKUID}}”＆gt;编辑
销售属性＆lt  ; / button＆gt; 
＆lt; button type =“button”class =“btn btn-default dropdown-toggle”data- 
 toggle =“dropdown”＆gt; 
＆lt; span class =“caret”＆gt;＆lt;  / span＆gt; 
＆lt; / button＆gt; 
＆lt; ul class =“dropdown-menu”role =“menu”＆gt; 
＆lt; li＆gt;＆lt; a href =“{{url（'editCatalogue'）}  }＆gt;编辑目录＆lt; / a＆gt;＆lt; / li＆gt; 
＆lt; li＆gt;＆lt; a href =“＃”＆gt; Archieve列表＆lt; / a＆gt;＆lt; / li＆gt; 
＆lt; / ul＆gt; \  n＆lt; / div＆gt; 
＆lt; / tbody＆gt;  
 @endforeach 
  code>  pre> 
 
 这是laravel视图，其中列出了从db获取的许多 skuid  strong>值。 另外，我还列出了一个包含Edit Catalog和Archieve Listing的下拉菜单。 在点击archieve列表时，我需要获取该行中列出的 skuid  strong>。 p> 
 
 
 脚本代码： strong>  p> \  n 
 
 ＆lt; script type =“text / javascript”＆gt; 
 $（document）.ready（function（）{
var liveSKUID = $（“＃skuvalue”）。val（）;  
alert（liveSKUID）; 
}）; 
  code>  pre> 
 
   p> 
 
 
这是我尝试的简单脚本，但它提醒 '0'。 p> 
  div>

答

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>

答

skuvalue seems to be an id but you're calling $(".skuvalue") which is a class.

Try $("#skuvalue")

答

So here when you are fetching similar li based as per the count of $liveValue. First thing you need to do is that id = skuvalue will not work as id's are meant for single values or single element in whole page. So we need class instead of id

Secondly, i have noticed that you are using for val() and in your html there is no value attribute set to any li. If you are looking for the text of the li. You will use text() instead of val()

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

but if you want to use id

Using ID and On click of the element

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

</div>

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

相关推荐