0

というテキストフィールドがあります。複製できます。値を選択するためのリンクもあります。

お見せするためにjsフィドルを作成しました。

全ページ表示: http://jsfiddle.net/ZpEK9/embedded/result/

ソース: http://jsfiddle.net/ZpEK9/

ご覧のとおり、「名前を選択」リンクをクリックすると、ウィンドウがポップアップ表示されます。そのウィンドウには、名前と名前を選択するためのリンクがあります。

ユーザークロックの「名前を挿入」リンクのときに、その名前をテキストフィールドに挿入したいと思います。誰でも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>​

ありがとう

4

2 に答える 2

1

これを試して。入力名を変更し、optionそれぞれにクラスを追加しました<a>。

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

フィドル

于 2012-11-16T17:48:46.670 に答える
1

私はここであなたの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');
    });

ボタンに data-value 属性を追加しました。例:

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

プラグインを使用していくつかの魔法を実行しているため、エレガントなソリューションには少し劣りますが、実際に現在行っていることに対する唯一の変更は、モーダルの開閉を手動でトリガーして、クリックにフックできるようにすることです「名前の選択」リンクのイベント。

于 2012-11-16T18:13:04.490 に答える