douwei1408 2018-05-11 10:44
浏览 90
已采纳

如何在下拉菜单中获取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 2018-05-11 10:51
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决