Как бы я динамически создавать поля ввода на лету? - PullRequest
Новая
       16

Как бы я динамически создавать поля ввода на лету?

1 голос
/ 26 ноября 2011

Я хочу использовать значение раскрывающегося списка HTML и создать это количество полей ввода внизу.Я надеюсь, что смогу достичь этого на лету.Также, если значение изменяется, его следует добавить или удалить соответствующим образом.

На каком языке программирования мне нужно это сделать?Я использую PHP для всего сайта.

Ответы [ 4 ]

2 голосов
/ 26 ноября 2011

Вот пример, который использует jQuery для достижения ваших целей:

Предположим, у вас есть следующий html: 

  <div>
    <select id="input_count">
      <option value="1">1 input</option>
      <option value="2">2 inputs</option>
      <option value="3">3 inputs</option>
    </select>
  <div>
  <div id="inputs"> </div>

И это код js для вашей задачи: 

  $('#input_count').change(function() {
      var selectObj = $(this);
      var selectedOption = selectObj.find(":selected");
      var selectedValue = selectedOption.val();

      var targetDiv = $("#inputs");
      targetDiv.html("");
      for(var i = 0; i < selectedValue; i++) {
        targetDiv.append($("<input />"));
      }
  });

Вы можете упростить этот код следующим образом: 

  $('#input_count').change(function() {
      var selectedValue = $(this).val();

      var targetDiv = $("#inputs").html("");
      for(var i = 0; i < selectedValue; i++) {
        targetDiv.append($("<input />"));
      }
  });

Вот пример рабочего скрипта: http://jsfiddle.net/melih/VnRBm/

Вы можете узнать больше о jQuery: http://jquery.com/

1 голос
/ 26 ноября 2011

Я бы пошел на JQuery.

Для начала взглянем на change (), empty () и append ()

http://api.jquery.com/change/

http://api.jquery.com/empty/

http://api.jquery.com/append/

0 голосов
/ 26 ноября 2011

вы, скорее всего, будете использовать javascript (именно это и есть jquery), вот пример, чтобы показать вам, как это можно сделать, чтобы помочь вам продвинуться 

 <select name="s" onchange="addTxtInputs(this)" onkeyup="addTxtInputs(this)">
 <option value="0">Add</option>
 <option value="1">1</option>
 <option value="3">3</option>
 <option value="7">7</option>
 </select>
 <div id="inputPlaceHolder"></div>

javascript для динамического создания выбранногоколичество входов на лету, основанное на Mutahhir ответе 

<script>
function addTxtInputs(o){

  var n = o.value; // holds the value from the selected option (dropdown)
  var p = document.getElementById("inputPlaceHolder"); // this is to get the placeholder element
  p.innerHTML = ""; // clears the contents of the place holder each time the select option is chosen.

// loop to create the number of inputs based apon `n`(selected value) 
   for (var i=0; i < n; i++) { 
       var odiv = document.createElement("div"); //create a div so each input can have there own line
       var inpt = document.createElement("input");
       inpt['type'] = "text"; // the input type is text
       inpt['id'] = "someInputId_" + i; // set a id for optional reference 
       inpt['name'] = "someInputName_" + i; // an unique name for each of the inputs

       odiv.appendChild(inpt); // append the each input to a div
       p.appendChild(odiv); // append the div and inputs to the placeholder (inputPlaceHolder)
     }
 }
</script>
0 голосов
/ 26 ноября 2011

Сделать это в javascript довольно просто. Предполагая, что у вас есть номер и HTML-элемент, куда вставить. Вы можете получить родительский элемент html, используя document.getElementById или другие подобные методы. Метод предполагает, что единственными дочерними элементами parentElement будут эти поля ввода. Вот пример кода: 

function addInput = function( number, parentElement ) {
    // clear all previous children
    parentElement.innerHtml = "";
    for (var i = 0; i < number; i++) {
        var inputEl = document.createElement('input');
        inputEl['type'] = 'text';
        // set other styles here
        parentElement.appendChild(inputEl);
    }
}

для события выбора изменения, смотрите здесь: событие ввода JavaScript выбора

...