0

我正在使用这个脚本来创建一个食物和饮料菜单，我刚刚在一个我不太了解的网站上找到了这个 javascript，但它真的很好用。

我将有一个按钮来输入许多不同膳食类型的条目，例如早餐、饮料、晚餐、甜点等。

我如何编辑它，使文本框名称为早餐选择 [] 或晚餐选择 []？

此外，当我单击“添加选项”按钮时，我如何才能拥有它，所以它会显示“选项 1：文本框”，然后当他们点击另一个文本框时，它会显示“选项 2：文本框”

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<SCRIPT language="javascript">
function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("name", "selection[]");


    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);
    var br = document.createElement("br");
    foo.appendChild(br);    
}

</SCRIPT>
</head>

<body>
<form method="POST" action="testforms.php">
<p><b>Add a Menu Set</b></p>
<table border="0" width="100%" cellspacing="5" cellpadding="5">
    <tr>
        <td width="25%">Menu Set Name</td>
        <td width="75%">
            <p><input type="text" name="setname" size="50"></p>
        </td>
    </tr>
    <tr>
        <td width="25%">&nbsp;</td>
        <td width="75%">&nbsp;</td>
    </tr>
    <tr>
        <td width="25%">&nbsp;</td>
        <td width="75%">&nbsp;</td>
    </tr>
    <tr>
        <td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add(document.forms[0].text)"/></td>
    </tr>
    <tr>
        <td width="100%" colspan="2">
        <span id="fooBar"> </span>
        </td>
    </tr>
</table>
</form>

</body>

</html>
4

1 回答 1

1

我如何编辑它，使文本框名称为早餐选择 [] 或晚餐选择 []？

改变

element.setAttribute("name", "selection[]");

至

element.setAttribute("name", "breakfast_selection[]");

此外，当我单击“添加选项”按钮时，我如何才能拥有它，所以它会显示“选项 1：文本框”，然后当他们点击另一个文本框时，它会显示“选项 2：文本框”

添加一个变量i来跟踪选项的数量。请参阅下面的代码 -

根据OP评论更新

改变

<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add(document.forms[0].text)"/></td>

至

<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add('breakfast')"/><br>
Lunch <INPUT type="button" value="Add Option" onclick="add('lunch')"/></td>

更新脚本

<SCRIPT language="javascript">
var i = 1;
function add(orderType) {

//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("name", orderType + "_selection[]");


var foo = document.getElementById("fooBar");

//Append the element in page (in span).
//Create the option text
var a = document.createTextNode("option " + i + ": ");
foo.appendChild(a);
foo.appendChild(element);
var br = document.createElement("br");
foo.appendChild(br);
i++;    
}

</SCRIPT>

在JSFiddle上查看演示

于 2013-10-28T12:15:09.700 回答