JQuery добавить текст в текстовое поле

Question

Извините, люди, все еще толстые на JQuery. Если бы большую помощь в создании списка выбора уль Li, как это

$(document).ready(function(){ 

    $('.selectoption li').not(':first').hide(); 

    $('.prev, .next').click(function() { 
     // Determine the direction 
     var dir = $(this).hasClass('prev') ? 'prev' : 'next'; 
     // Get the li that is currently visible 
     var current = $('.selectoption li:visible'); 

     // Get the element that should be shown next according to direction 
     var next = dir == 'prev' ? current.prev('li') : current.next('li'); 

     // If there's no more in that direction, select first/last 
     if(next.size() == 0) { 
      next = dir == 'prev' ? $('.selectoption li:first') : $('.selectoption li:first'); 
     } 

     // Hide them all.. 
     $('.selectoption li').hide(); 
     // And show the new one 
     next.show(); 

     return false; 
    }); 

}); 

Но как я могу затем добавить значение выбранного Li в текстовое поле, поэтому он может быть использован в форме - не использовать Ajax и т.д. на этом когда список li находится вне формы.

Кроме того, если я скажу, что 3 или 4 этих ul li на странице, как я могу обернуть вышеуказанный код так, чтобы кнопка next/prev только wotk с помощью ul li, к которой они применяются.

Заранее спасибо

Answer 1

Я думаю, что понимаю, что вы здесь просите, но я могу ошибаться. Предполагая, что я это делаю, я бы добавил классы или идентификаторы, чтобы представить связь между элементами. Например:

<input type="hidden" name="degree" id="degree" /> 
<div id="degree_selectable_control" class="selectable_control"> 
    <a href="#" class="prev">Prev</a> | 
    <a href="#" class="next">Next</a> 
</div> 
<ul id="degreee_selectable" class="selectable"> 
    <li>Associates</li> 
    <li>Bachelor's</li> 
    <li>Graduate</li> 
    <li>Other</li> 
</ul> 

<input type="hidden" name="salary" id="salary" /> 
<div id="salary_selectable_control" class="selectable_control"> 
    <a href="#" class="prev">Prev</a> | 
    <a href="#" class="next">Next</a> 
</div> 
<ul id="salary_selectable" class="selectable"> 
    <li>> $20,000</li> 
    <li>$20,000 - $35,000</li> 
    <li>$35,000 - $50,000</li> 
    <li>< $50,000</li> 
</ul> 

Тогда вы могли бы реорганизовать существующий JavaScript в нечто вроде:

$(document).ready(function(){ 
    // init the selectables 
    $('.selectable').each(function(){ 
     $(this).find('li').not(':first').hide(); 
    }); 
    // assign the handlers for each control 
    $('.selectable_control').each(function(){ 
     var field_id = this.id.replace(/_selectable_control$/, ''), 
      $selectable = $('#' + field_id + '_selectable'), 
      $field = $('#' + field_id); 

     $(this).find('.prev, .next').click(function(){ 
      // Determine the direction 
      var dir = $(this).hasClass('prev') ? 'prev' : 'next'; 
      // Get the li that is currently visible 
      var current = $selectable.find('li:visible'); 

      // Get the element that should be shown next according to direction 
      var next = dir == 'prev' ? current.prev('li') : current.next('li'); 

      // If there's no more in that direction, select first/last 
      if(next.length === 0) { 
       next = dir == 'prev' ? $selectable.find('li:last') : $selectable.find('li:first'); 
      } 

      // Hide them all.. 
      $selectable.find('li').hide(); 
      // And show the new one 
      next.show(); 
      // And update the corresponding field 
      $field.val(next.text()); 

      return false; 
     }); 
    }); 
}); 

Конечным результатом является то, что вы группируют блоки управления, selectables и поля, что позволяет вам сохраните выбранные значения по желанию.

Answer 2

Я не уверен, я полностью понимаю, что вы ищете, но я к этому в более общем смысле:

$("li").click(function(){ 
    // Place LI text as value of <input type="text" name='fname' /> 
    $(":input[name='fname']").val($(this).text()); 
}); 

Чтобы сделать код более ограничительным в отношении которых UL он обращается в своих селекторов:

<ul> 
    <li class="selectOption">Ignore Me</li> 
</ul> 
<ul> 
    <li class="selectOption">Include Me</li> 
</ul> 

Мы могли бы использовать следующее:

$("ul:eq(1) .selectOption").click(function(){ 
    // only the LI in the second UL will trigger this 
}); 

Обратите внимание, что мы имеем дело с индексом на основе нуля, поэтому использование «1» для адреса второго неупорядоченного списка.