Question

我有以下表格。它的目的是查看选择了什么状态并将该值传递给脚本，该脚本将动态添加更多带有自动递增ID的下拉框以存储在数据库中。我没有脚本错误，但动态字段不会弹出到位。顺便提一下，这是基于Rob在这里的工作http://www.web-design-talk.co.uk/58/adding-unlimited-form-fields-with-jquery-mysql/#comment-70752。任何人都可以看到我正在做的任何错误。

<html>
<head>
<title>Form</title>
<script type="text/javascript" src="../lib/jquery/jquery-1.8.1.min.js"></script>
</head>

<body>

<form id="Form" name="Form" method="post" action="Form.php">
<fieldset>
<legend>Form</legend>

<label>Operations State: </label>
<select name="StateID" id="StateID">
<option value="">Select a State</option>
<option value="CA">CA</option>
<option value="NY">NY</option>
<option value="PA">PA</option>
</select>
<br>
<div id="container">
<p id="add_field">
<label><a href="#" onclick="getClass(StateID.value)">Add A Class Code</a></label>Please select a Class Code
</p>
</div>

</fieldset>
</form>

<script>
var i = 0;

function getClass(str){
var StateID = $("#StateID").val();

$('p#add_field').on('click', function(){
i += 1;

$('#container').before
if (StateID == "CA"){
    ('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="1">1</option><option value="2">2</option><option value="3">3</option>' + '</select><br>')
}

else if (StateID == "NY"){
    ('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="4">4</option><option value="5">5</option><option value="6">6</option>' + '</select><br>')
}

else if (StateID == "PA"){
    ('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="7">7</option><option value="8">8</option><option value="9">9</option>' + '</select><br>')
}

else{
}

});     
}

</script>

</body>
</html>

提前谢谢！

经过一些编辑后，我想出了以下内容......

<script>

var i = 0;

function getClass(){
var StateID = $("#StateID").val();

$('p#add_field').on('click', function(){
i += 1;

if (StateID == "CA"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="1">1</option><option value="2">2</option><option value="3">3</option>' + '</select><br>')
}

else if (StateID == "NY"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="4">4</option><option value="5">5</option><option value="6">6</option>' + '</select><br>')
}

else if (StateID == "PA"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="7">7</option><option value="8">8</option><option value="9">9</option>' + '</select><br>')
}   

else{
}

})
}

</script>

此版本确实会看到StateID并相应地更改每个新添加的下拉框。唯一的问题是，除了自动递增ID（例如ClassCode_1，ClassCode_2等）之外，它还会增加输出到页面的字段数。如果可以计算出来，那就太棒了！

Answer 1

您正在错误地设置“getClass（）”函数。编写代码的方式，它作为参数传递给jQuery，而不被声明为全局函数。所以只需声明：

function getClass(str) {
  // ...
}

一旦你这样做，我想你想要改变添加内容的代码，以便它添加一个完整的单个DOM元素。使用<label>或其他内容围绕<select>和<span>。

此外，“i”需要是一个全局变量，否则每次调用函数时都会从0开始。将其声明移到“getClass”之外。

Answer 2

你有相当数量试图在这里发生;我将事情简化为基础知识，以便您可以看到正在发生的事情。

你有一个基本上是点击处理程序（HTML中的onclick）似乎试图将其他点击处理程序附加到段落标记。我猜这不是你想要的。你正在使用jQuery，所以当jQuery可以为你管理所有这些时，没有必要为你的点击添加一个onclick属性。

步骤应该是：

点击链接，检查状态下拉列表的值。
删除之前已注入DOM的所有下拉列表。
将新的下拉列表注入DOM，其中的选项取决于值。

请查看此Fiddle ，希望将所有内容都删回基础。这就是我认为你所追求的，虽然我不确定你在尝试使用增量ID做什么 - 我将不得不将这一点留给你判断！

Javascript条件动态表单不输入字段

2 个答案: