Question

我是JavaScript的新手，我正在尝试在其中创建一个包含JavaScript的html页面。这个想法是，当有人从select中选择option的值时，它应该自动生成firstName，lastName等字段，具体取决于所选的数字。如果选择了一个，那么它应该有一个firstName，lastName字段，如果选择了两个，那么它应该动态生成两个字段。

    <select id="noOfAuthor" multiple="multiple">
        <option value="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
        <option value="four">4</option>
        <option value="five">5</option>

    </select>

如果某人选择了一个，那么应该有一个代码

      Title Name <input type="text" name="txtTitle1">
      Author Name <input type="text" name="txtAuthor1" >
      Copy right<input type="text" name="txtCopyrightYear1">

如果我们选择“2”那么应该有两个代码询问

       Title Name <input type="text" name="txtTitle1">
      Author Name <input type="text" name="txtAuthor1" >
      Copy right<input type="text" name="txtCopyrightYear1">


      Title Name <input type="text" name="txtTitle2">
      Author Name <input type="text" name="txtAuthor2" >
      Copy right<input type="text" name="txtCopyrightYear2">

依此类推。

我尝试编写代码来执行此操作，但它无效。

<html>

<head>

<title>Book Collection</title>

<script language="JavaScript">
function WBook(bookName, writer, yearPublished)
{
    this.Title  = bookName;
    this.Author = writer;
    this.CopyrightYear = yearPublished;
}

function showBook(oneBook)
{
     var no = showChoices();
     var i ;
    for(i =0; i<no; i++)
    {
         document.frmBooks.txtTitle[i].value  = oneBook.Title[i];   
         document.frmBooks.txtAuthor[i].value = oneBook.Author[i];
         document.frmBooks.txtCopyrightYear[i].value = oneBook.CopyrightYear[i];
    }
 }

  function displayCollection()
  {
     var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
     showBook(aBook);   
  }

  function showChoices(){
    var noOfAuthor = document.getElementById("noOfAuthor");     
    var result = " You selected";
    result += " \n";

    for(i=0; i<noOfAuthor.length;i++){

         currentOption = noOfAuthor[i];
        if(currentOption.selected == true){
            result +=   currentOption.value + "\n";

         }
    }
    result += " \n";
    alert(result);
    return(result); 

    }
    </Script>
    </head>

   <body>


   <h1>Book Collection</h1>
   <form name="frmBooks">
    <input type="hidden" name="id" value="" required="true" /><br> <br>
    <select id="noOfAuthor" >
        <option value="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
        <option value="four">4</option>
        <option value="five">5</option>

    </select>

    <button type="button" onclick="showChoices()">Submit</button>

      Title Name <input type="text" name="txtTitle1">
      Author Name <input type="text" name="txtAuthor1" >
      Copy right<input type="text" name="txtCopyrightYear1">

      Title Name <input type="text" name="txtTitle2">
      Author Name <input type="text" name="txtAuthor2" >
      Copy right<input type="text" name="txtCopyrightYear2">


        <p><input type="button" value="Show Collection" name="btnShow"            onClick="displayCollection()">

    </form>

    </body>

    </html>

Answer 1

你可以这样解决（ jsFiddle demo ）：

<html>

<head>

<title>Book Collection</title>

<script language="JavaScript">
function WBook(bookName, writer, yearPublished)
{
    this.Title  = bookName;
    this.Author = writer;
    this.CopyrightYear = yearPublished;
}

function showBook(oneBook)
{
     var no = showChoices();
     var i ;
    for(i =0; i<no; i++)
    {
         document.frmBooks.txtTitle[i].value  = oneBook.Title[i];   
         document.frmBooks.txtAuthor[i].value = oneBook.Author[i];
         document.frmBooks.txtCopyrightYear[i].value = oneBook.CopyrightYear[i];
    }
 }

  function displayCollection()
  {
     var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
     showBook(aBook);   
  }

  function showChoices(){
    var noOfAuthor = document.getElementById("noOfAuthor");     
    var result = " You selected";
    result += " \n";
    result += noOfAuthor.value

    for(i=1; i <= noOfAuthor.length;i++){

        if(i <= noOfAuthor.value){
            document.getElementById("inputs" + i).style.display = 'block';
        } else {
            document.getElementById("inputs" + i).style.display = 'none';
         }
    }
    result += " \n";
    alert(result);
    return(result); 

    }
    </Script>
    </head>

   <body>


   <h1>Book Collection</h1>
   <form name="frmBooks">
    <input type="hidden" name="id" value="" required="true" /><br> <br>
    <select id="noOfAuthor" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>

    </select>

    <button type="button" onclick="showChoices()">Submit</button>
    <div id="inputs1">
      Title Name <input type="text" name="txtTitle1">
      Author Name <input type="text" name="txtAuthor1" >
      Copy right<input type="text" name="txtCopyrightYear1">
    </div>
    <div id="inputs2" style="display:none">
      Title Name <input type="text" name="txtTitle2">
      Author Name <input type="text" name="txtAuthor2" >
      Copy right<input type="text" name="txtCopyrightYear2">
    </div>
    <div id="inputs3" style="display:none">
      Title Name <input type="text" name="txtTitle3">
      Author Name <input type="text" name="txtAuthor3" >
      Copy right<input type="text" name="txtCopyrightYear3">
    </div>
    <div id="inputs4" style="display:none">
      Title Name <input type="text" name="txtTitle4">
      Author Name <input type="text" name="txtAuthor4" >
      Copy right<input type="text" name="txtCopyrightYear4">
    </div>
    <div id="inputs5" style="display:none">
      Title Name <input type="text" name="txtTitle5">
      Author Name <input type="text" name="txtAuthor5" >
      Copy right<input type="text" name="txtCopyrightYear5">
    </div>


        <p><input type="button" value="Show Collection" name="btnShow"            onClick="displayCollection()">

    </form>

    </body>

    </html>

Answer 2

使用jquery非常简单：

    <select id="noOfAuthor" multiple="multiple">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>

    </select>
    <div id="inputs"></div>

$( document ).ready(function() {
    $("select#noOfAuthor > option").click(function() {
        $( "#noOfAuthor" ).attr("disabled", true);
        var howMuch = parseInt($( "#noOfAuthor" ).val());
        for(i = 0; i < howMuch; i++) {
               $( "#inputs" ).append('Title Name: <input type="text" name="txtTitle' + i + '"><br>Author Name: <input type="text" name="txtAuthor' + i + '"><br>Copy right: <input type="text" name="txtCopyrightYear' + i + '"><br><hr />');
        }
    });

});

因此您可以获得所选数字的输入。三个第一个将是：

名= “txtTitle0”
名= “txtAuthor0”
名= “txtCopyrightYear0”

demo：http://jsfiddle.net/mxgbc/3/

Answer 3

我会动态生成输入和标签。这是一个纯javascript示例，不使用jQuery。如果需要，我可以提供jQuery解决方案。

示例http://jsfiddle.net/A62qA/1 //基本选择菜单

示例http://jsfiddle.net/A62qA/2/ //多项选择菜单

HTML

<select id="noOfAuthor" onchange="inputFunction(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<div id="myContainer"></div>

的JavaScript

function createInputs(i) {
        var myContainer = document.getElementById("myContainer");
        var titleName = document.createElement("input");
            titleName.setAttribute('name', 'txtTitle1' + i);
        var label = document.createElement("Label");
            label.innerHTML = "Title Name";
            myContainer.appendChild(label);
            myContainer.appendChild(titleName);

        var authorName = document.createElement("input");
            authorName.setAttribute('name', 'txtAuthor1' + i);
        var label = document.createElement("Label");
            label.innerHTML = "Author Name";
            myContainer.appendChild(label);
            myContainer.appendChild(authorName);

        var copyRight = document.createElement("input");
            copyRight.setAttribute('name', 'txtCopyrightYear1' + i);
        var label = document.createElement("Label");
            label.innerHTML = "CopyRight";
            myContainer.appendChild(label);
            myContainer.appendChild(copyRight);
    }

    function inputFunction(y) {
        var y = y.value;
        var myContainer = document.getElementById("myContainer");
        for (var i = 0; i < y; i++) {
            createInputs(i);
        }
    }

如何在JavaScript中自发获取多个输入

3 个答案:

demo：http://jsfiddle.net/mxgbc/3/