Question

我有一个名为的文本字段。它可以被克隆。此外，还有一个可用于选择值的链接。

我已经创建了一个js小提琴来向你展示。

整页视图：http://jsfiddle.net/ZpEK9/embedded/result/

正如您在那里看到的，如果您单击“选择名称”链接，它将弹出一个窗口。该窗口有名称和选择名称的链接。

我想在用户时钟“插入名称”链接时在文本字段中插入该名称。任何人都可以用jquery代码帮助我..

PS：表单字段是可克隆的。

这就是我的代码的样子..

<form>
    <div class="control-group success">

  <div class="controls">
      <p class="clone"><input type="text" name="name[]"><span class="help-inline"><a data-toggle="modal" href="#myModal">Select a name</a></span></p>
    <span class="help-inline"><a href="#" class="add" rel=".clone">Add More</a></span>
  </div>
</div>
</form>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
           <div class="row-fluid">
            <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Sam</h3>
                    <p><a href="#" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Linda</h3>
                    <p><a href="#" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Lucy</h3>
                    <p><a href="#" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Jenifer</h3>
                    <p><a href="#" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          </div>

由于

Answer 1

试试这个。我已更改输入名称，并为每个option添加了<a>类。

$('a.option').on('click', function() {
  $('input[name="name"]').val($(this).parent().parent().find('h3').text())
  $('.modal').toggle()
});

FIDDLE

Answer 2

我在这里用一个有效的解决方案分叉你的JSFiddle：

http://jsfiddle.net/jg5C7/3/

在链接中添加了“select-name”类：

    <span class="help-inline">
        <a class="select-name" href="#myModal">Select a name</a>
    </span>

为链接添加了绑定：

    $('a.select-name').click(function() {
        $('#myModal').data('current-input', $(this));
        $('#myModal').modal('show');
    });

    $('#myModal .btn').click(function() {
        $('#myModal').data('current-input').closest('p').find(':text').val($(this).data('value'));
        $('#myModal').modal('hide');
    });

为按钮添加了数据值属性，例如：

    <p><a href="#" data-value="Sam" class="btn btn-primary">Insert name</a></p>

因为你正在使用插件来做一些魔术，所以它不是一个优雅的解决方案，但实际上你正在做的唯一改变就是我手动触发模态打开/关闭以便我可以挂钩到“选择名称”链接的点击事件。

使用javascript在clonable表单文本字段中插入值

2 个答案: