Question

我有一个问题。我有3个div，所有这些潜水都应该是可点击的。点击div后，div的值应该被推送到隐藏的输入，表格应该自动提交。我怎么能以最好的方式做到这一点？

UPD

<form action="" method="get">
  <input type="text" class="hidden" id="inputID"/>
  <div id="placeholder">
    <div class="addresses">
        <div class="address">address 1</div>
        <div class="address">address 2</div>
        <div class="address">address 3</div>
    </div>
  </div>
</form>

因此，当您点击 .address 时，应将 .address 的值推送到 #inputID

Answer 1

以下JavaScript应该按照您的要求进行操作。

＆＃13;

$(".address").click(function() {
  $("#inputID").val($(this).text());
  $("form").submit();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="get">
  <input type="text" class="hidden" id="inputID"/>
  <div id="placeholder">
    <div class="addresses">
        <div class="address">address 1</div>
        <div class="address">address 2</div>
        <div class="address">address 3</div>
    </div>
  </div>
</form>

＆＃13;

Answer 2

$('.address').on('click', function() {
   $('#inputID').val($(this).text());
   $('form').submit();
});

Answer 3

$('div.address').click(function() { $('#inputID').val($(this).text()); $('form').submit(); });

Answer 4

请使用jQuery查看此解决方案：

HTML：

<form action="" method="get">
  <input type="text" class="hidden" id="inputID"/>
  <div id="placeholder">
    <div class="addresses">
        <div class="address">Berlin Leipzigerstr. 13</div>
        <div class="address">Berlin Firedrichstr. 2</div>
        <div class="address">Berlin Berlinerstr. 90</div>
    </div>
  </div>
</form>

JavaScript的：

$('.address').click(function(){
    $('#inputID').val($(this).text());
    $('form').submit();
});

DEMO

单击div后，将内容推送到div的隐藏输入

4 个答案: