Как получить значение li в выпадающем меню щелчка в laravel, используя jquery?

Question

Просмотреть код:

 @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

Это представление в виде яруса, где я перечислил множество значений skuid , полученных из базы данных,Также рядом с этим я перечислил выпадающее меню с Редактировать каталог и Архивировать список.При щелчке по архивному списку мне нужно получить skuid , указанный в этой строке.

Код сценария:

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

Это простой скрипт, который я пробовал, но он предупреждает «0».

Answer 1

Вы запрашиваете li, используйте .text() вместо .val()

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

Вы генерируете одну и ту же разметку в каждом цикле, вызывая несколько id=skuvalue, что является недействительным HTML.Это означает, что вы не можете использовать $(#skuvalue), поскольку он всегда будет возвращать первое совпадение, поэтому вы должны выбрать его позиционно.

Я бы порекомендовал использовать data-id вместо этого, так как в противном случае у вас есть несколько дубликатов уникального id

Также ваша выборочная разметка создает недопустимую таблицу, нетtr или td вокруг остальных данных после первой td.

Предполагая, что у вас есть действительная таблица HTML, ниже приведен пример того, как вы можете это сделать.Если вы хотите получить ответ только при нажатии на конкретный li с текстом Archieve Listing, вам нужно присвоить ему атрибут или что-то, чтобы прикрепить к нему событие щелчка.

Вы можете перейти в позиционное положение и принять li всегда на 2-й позиции, но это ненадежно.Когда вы генерируете разметку, добавление data-id="archive" или подобного не должно быть проблемой.

Если вы нажмете соответствующую li, вы можете вернуться в дерево DOM, используя jQuery closest('tr'), чтобы добраться дотекущий ряд.Оттуда вы используете .find() на совпавшем tr, чтобы найти элемент с id=skuvalue.Я использовал селектор атрибута [id="skuvalue"] в приведенном ниже примере, но я думаю, что .find('#skuvalue') также должен работать, поскольку вы выполняете поиск только в контексте отдельной строки.

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

Answer 2

Так вот, когда вы выбираете аналогичные li на основе подсчета $liveValue.Первое, что вам нужно сделать, это то, что id = skuvalue не будет работать, так как id's предназначены для отдельных значений или одного элемента на всей странице.Поэтому нам нужно class вместо id

Во-вторых, я заметил, что вы используете для val(), и в вашем html нет value attribute, установленного для любого li.Если вы ищете text из li.Вы будете использовать text() вместо val()

Используя тот же класс :

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>

, но если вы хотите использовать id

Используя ID и при нажатии элемента

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

Answer 3

skuvalue кажется идентификатором, но вы вызываете $ (". Skuvalue"), который является классом.

Попробуйте $ ("# skuvalue")