填充列表項中的單個文本框值

Question

我在選擇div後使用以下腳本填充文本框。

var input = $('input[name="reason"]'); 
$("ul.instore li").click(function() { 
    input.val($(this).attr('value')) 
    $("ul.instore li.active").removeClass("active"); 
    $(this).addClass("active"); 
}); 

HTML

<ul class="instore"> 
    <li value="1">Option #1</li> 
    <li value="2">Option #2</li> 
    <li value="3">Option #3</li> 
    <li value="4">Option #4</li> 
    <li value="5">Option #5</li> 
    <li value="6">Option #6</li> 
</ul> 
<input type="text" name="reason" /> 

小提琴：http://jsfiddle.net/zM84Z/

它的工作原理就像一個魅力，但現在我需要把它擴大到允許多重選擇。

我一直在試圖調整腳本，以便點擊'選項＃1'將填充選項1的文本框（或複選框，或其他）。點擊'Option＃2'將填充選項2的文本框，等等。

任何援助將不勝感激。

Answer 1

您需要一種方法來識別領域

<ul class="instore"> 
    <li value="1">Option #1</li> 
    <li value="2">Option #2</li> 
    <li value="3">Option #3</li> 
    <li value="4">Option #4</li> 
    <li value="5">Option #5</li> 
    <li value="6">Option #6</li> 
</ul> 
<input type="text" name="reason" id="input_1" /> 
<input type="text" name="reason" id="input_2" /> 
<input type="text" name="reason" id="input_3" /> 
<input type="text" name="reason" id="input_4" /> 
<input type="text" name="reason" id="input_5" /> 
<input type="text" name="reason" id="input_6" /> 

和jQuery可以很容易地使用選擇'#input_' + $(this).val()

$("ul.instore li").click(function() { 
    var val = $(this).val(); 
    $('#input_' + val).val(val); 
    $(this).addClass("active").siblings().removeClass("active"); 
}); 

http://jsfiddle.net/popnoodles/zM84Z/3/