jquery - 动态文本框输出

Question

我已经让 JQuery 使用下拉菜单输出动态文本框，但我无法获取要输出的值。我会缺少什么？我失踪了什么？我有一种感觉，我还需要另一个计数器来输出。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
v1<label id="v1"></label> <br> v2
<label id="v2"></label><br> v3
<label id="v3"></label><br> v4
<label id="v4"></label><br>


<div style="padding:16px;">


  v1
  <INPUT id="v1" type="text"><br> v2 <input type="text" id="v2" name="v2"> <br> v3
  <input type="text" id="v3" name="v3"><br> v4 <select id="dropdown">
  <option value="0">Select number of inputs</option>
  <option value="1">1 input</option>
  <option value="2">2 inputs</option>
  <option value="3">3 inputs</option>
  <option value="4">4 inputs</option>
</select>
  <div id="input-holder"></div>
</div>

<button id="Get">Get TextBox Value</button>


<script>
  $(':button#Get').click(function() {
    $('#v1').html($('input#v1').val());
    $('#v2').html($('input#v2').val());
    $('#v3').html($('input#v3').val());
    $('#v4').html($('input#v4').val());


  });


  $('#dropdown').change(function() {
        if ($(this).val() > 0) {
          $('#input-holder').empty();
          for (i = 1; i <= $(this).val(); i++) {
            $('#input-holder').append('Enter Info:' + < input type = "text"
              name = "v4'+i+'"
              id = "' + i +'" > ');
            }
          }
        });
</script>

Answer 1

您的代码中有两个错误。

1) 你没有包含jquery。 2) 脚本中的语法错误。

检查下面的代码是否有效。

  $(':button#Get').click(function() {
    $('#v1').html($('input#v1').val());
    $('#v2').html($('input#v2').val());
    $('#v3').html($('input#v3').val());
    $('#v4').html($('input#v4').val());


  });


  $('#dropdown').change(function() {
    if ($(this).val() > 0) {
      $('#input-holder').empty();
      for (i = 1; i <= $(this).val(); i++) {
        $('#input-holder').append('Enter Info:' + '< input type = "text" name = "v4'+i+'" id = "' + i +'" > ');
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

v1<label id="v1"></label> <br> v2
<label id="v2"></label><br> v3
<label id="v3"></label><br> v4
<label id="v4"></label><br>


<div style="padding:16px;">


  v1
  <INPUT id="v1" type="text"><br> v2 <input type="text" id="v2" name="v2"> <br> v3
  <input type="text" id="v3" name="v3"><br> v4 <select id="dropdown">
  <option value="0">Select number of inputs</option>
  <option value="1">1 input</option>
  <option value="2">2 inputs</option>
  <option value="3">3 inputs</option>
  <option value="4">4 inputs</option>
</select>
  <div id="input-holder"></div>
</div>

<button id="Get">Get TextBox Value</button>