douwei1408
douwei1408
2018-05-11 10:44

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

This is the exact view pageView 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'.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • dqyknf4423 dqyknf4423 3年前

    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>
    
    点赞 评论 复制链接分享
  • dongmao3148 dongmao3148 3年前

    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>
    
    点赞 评论 复制链接分享
  • douyu9433 douyu9433 3年前

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

    Try $("#skuvalue")

    点赞 评论 复制链接分享