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

how to get selected li value in jquery
how to get selected li value in ul on click event in jquery
how to get active li value in jquery
get all li value in jquery
get li attribute value jquery
how to set li value in jquery
how to get id of li in javascript
how to get ul list value in jquery

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

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>

Get the value attribute of the selected LI element in jQuery UI menu , Then I am trying to retrieve and display that value in an alert on a button click: $("​#menu").menu({ items  Excel Dynamic Chart with Drop down List (column graph with average line) - Duration: 8:09. Leila Gharani 142,684 views

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>

How to populate a dropdown menu from database ?, I need to populate a drop-down menu with MySQL database values and trigger it when you select a value, it populates a second drop-down menu with value <​ul class="dropdown-menu"> <li class="dropdown-header">Phone</li> likely have a <select> element rather than Bootstrap Dropdown menu. create dynamic drop down list by using laravel framework Download code from here : https://drive.google.com/open?id=0B1h Get dynamic data from table and this data

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

Try $("#skuvalue")

List group · Bootstrap, Use <a> s or <button> s to create actionable list group items with hover, (like <li​> s or <div> s) don't provide a click or tap affordance. With <button> s, you can also make use of the disabled attribute  How to get the value of li on dropdown menu click in laravel using jquery? Ask Question Asked 1 year, 10 months ago. javascript php jquery laravel-5.4.

Show Hide Dropdown Menu on Mouse Hover Using CSS, HOME HTML5 CSS3 JAVASCRIPT JQUERY BOOTSTRAP4 PHP7 SQL If you simply want to show and hide dropdown menu on mouse hover you The following example will show you how to implement a simple dropdown using the CSS. ul li a{; display: block;; padding: 8px 25px;; color: #333;; text-decoration: none;; } Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens). Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a "card". We also use z-index to place the dropdown in front of other elements.

Highlight current page menu item with jQuery, You can simply do this with jQuery, to highlight menu item according If the file name is empty then set index.html as a default value. li').each(function(){ // select href var href = $(this).find('a').attr('href'); AJAX · AngularJS · CodeIgniter · DataBase · How To · Javascript · JQuery · Laravel · Phonegap · PHP  Hello developers, Under this example, I will show you how to do Laravel Dependent Dropdown Tutorial With Example. We will get the second drop down item based on the first selected drop-down. When we select the first dropdown’s item, it will fire an AJAX request to the laravel server and in return, we get a response and we need to append that

Bootstrap JS Dropdown Reference, is a toggleable menu that allows the user to choose one value from a predefined list. Add data-toggle="dropdown" to a link or a button to toggle a dropdown menu. when the dropdown is fully shown (after CSS transitions have completed), Try it In this example, we use jQuery to open multi-level dropdowns on click:  Using jQuery: [code]jQuery("#select option:selected").val(); [/code]Using JavaScript: [code]var e = document.getElementById("select"); var strUser = e.options[e

Comments
  • You are using .skuvalue instead of #skuvalue your skuvalue is an id not class. It should be alerting undefined though in that case. So I assume it is a typo in your question. <li id="skuvalue" > is a li try var liveSKUID=$("#skuvalue").text(); instead.
  • yeah..sorry.I just forget to update it
  • Yes..I'm getting it..But how do I get the corresponding SKUID value on clicking the archieve menu
  • I generated valid table markup and added an example how you might do it.
  • Ok this works fine..but can I pass the respective SKUID on clicking the archieve listing menu of dropdown
  • @suryakalavelusamy If you want the text on click of the element, i just updated my answer have a look how you can do it using id. Click on any li item it will alert for you
  • Sorry ..I forget to update it . Its ("#skuvalue") only