0

我有以下表格。其目的是查看选择了什么状态并将该值传递给脚本，该脚本将动态添加更多具有自动递增 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 等），它还增加了输出到页面的字段数。如果能解决这个问题，那就太棒了！

4

2 回答 2

1

您错误地设置了“getClass()”函数。您的代码的编写方式是作为参数传递给 jQuery，并且没有被声明为全局函数。所以只需声明它：

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

一旦你这样做了，我认为你会想要更改添加内容的代码，以便添加完整的单个 DOM 元素。用 a或其他东西包围你的<label>and 。<select><span>

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

于 2012-10-01T17:01:50.713 回答
1

你有相当多的尝试在这里发生；我会把事情简化为基础，这样你就可以看到发生了什么。

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

步骤应该是：

  1. 单击链接时，检查状态下拉列表的值是什么。
  2. 删除之前注入 DOM 的所有下拉菜单。
  3. 向 DOM 中注入一个新的下拉菜单，选项取决于值。

看看这个Fiddle，它希望能把一切都归结为基础。这就是我认为你所追求的，虽然我不确定你想用递增的 ID 做什么——我必须让你自己判断！

于 2012-10-01T17:38:32.567 回答