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的文本框（或复选框，或其他）。单击“选项＃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/

从列表项中填充单个文本框值

1 个答案: