JQuery将文本附加到文本字段

Question

对不起，在JQuery上仍然很胖。有很大的帮助，创建一个可选择的UI李名单这样

$(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; 
    }); 

}); 

但我怎么能那么选择里的值添加到一个文本字段，以便它可以在表单中使用 - 不能在此使用Ajax等。因为李列表不在表单中。

另外，如果我在页面上说出了3个或4个这样的ul li，我如何用上面的代码包装上一个代码，使得下一个/ prev按钮只能使用它们适用的ul li。

在此先感谢

Answer 1

我想我明白你在问什么，但我可能是错的。假设我这样做，我会添加类或ID来表示元素之间的链接。例如：

<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”来解决第二个无序列表。