根据选择动态添加带有选择选项的DIV
问题描述：
您好同胞程序员精英！根据选择动态添加带有选择选项的DIV
我目前正在研究一个脚本，它将是我的其他脚本的组合。
- 第一个允许用户添加包含一组选择字段的多个DIV。主数据库从数据库中提取选择选项，而其他5个选项则被禁用，直到您选择，然后另一个选项将根据您所做的选择获取选择选项，并一次启用一个选项（总是在下一个选项之后选择;请参阅小提琴）
ATM我设法写一个“静态”版本，这意味着，只有第一组选择字段将工作（取，启用等），但附加由脚本将无法正常工作。
也许我觉得太复杂了，但我已经尝试过课程和ID了。他们中没有人似乎为我工作。
我想补充说，我在javascript/jQuery的知识不是那经历过，所以我需要帮助。在下面你会发现代码和我现在正在进行的准备去的小提琴。
请注意，提取的脚本只是传递$ _POST并查询在我的数据库中搜索的值。该脚本未添加到小提琴中。如果需要，我会添加它，但据我所知，这只是一个Javascript/jQuery问题。
我很感谢每一个提示和帮助！
<!-- HTML/PHP -->
<div class="mz_input_fields_wrap">
<a href="#" class="mz_add_field_button">
<table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-bottom: 0;">
<tr>
<th align="left">Add exam</th>
<th align="right"><font color="#FFD700">[+]</font></th>
</tr>
<tr>
<th colspan="2"><hr /></th>
</tr>
</table>
</a>
<div>
<table id="addmz" width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;">
<tr>
<td align="left">Exam<font color="#8E6516">*</font></td>
<td align="right">
<select name="mz_id[]" class="rd_id" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" required="required" >
<?
$select_option = "SELECT * FROM _main_wptable WHERE `event_id` = '".$event_id."' ORDER BY rd_id ASC";
$result_option = mysqli_query($mysqli, $select_option);
$anzahl_option = mysqli_num_rows($result_option);
if($anzahl_option > 0) {
echo "<option value=''>Choose exam</option>";
while($row = mysqli_fetch_assoc($result_option)) {
echo "<option value='".$row["rd_id"]."'>".$row["rd_type"].$row["rd_id"]."</option>";
}
} elseif($anzahl_option == 0) {
echo "<option value=''>No exams available</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td align="left">1. Position<font color="#8E6516">*</font></td>
<td align="right">
<select name="mz_id[]" class="rd_id_pos_1" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
<option value=" " selected="selected">Choose exam first</option>
</select>
</td>
</tr>
<tr>
<td align="left">2. Position<font color="#8E6516">*</font></td>
<td align="right">
<select name="mz_id[]" class="rd_id_pos_2" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
<option value=" " selected="selected">Choose exam first</option>
</select>
</td>
</tr>
<tr>
<td align="left">3. Position<font color="#8E6516">*</font></td>
<td align="right">
<select name="mz_id[]" class="rd_id_pos_3" placeholder="Bitte auswählen" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
<option value=" " selected="selected">Choose exam first</option>
</select>
</td>
</tr>
<tr>
<td align="left">4. Position<font color="#8E6516">*</font></td>
<td align="right">
<select name="mz_id[]" class="rd_id_pos_4" placeholder="Bitte auswählen" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
<option value=" " selected="selected">Choose exam first</option>
</select>
</td>
</tr>
<tr>
<td align="left">5. Position<font color="#8E6516">*</font></td>
<td align="right">
<select name="mz_id[]" class="rd_id_pos_5" placeholder="Bitte auswählen" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
<option value=" " selected="selected">Choose exam first</option>
</select>
</td>
</tr>
</table>
<!-- END OF HTML/PHP -->
<!-- JS/JQUERY -->
$(document).ready(function() {
// DEPENDENT SELECT OPTIONS
$('.rd_id').on('change',function(){
var rd_idID = $(this).val();
if(rd_idID){
$.ajax({
type: 'POST',
url: 'ajaxProcessing.php',
data: 'rd_id='+rd_idID,
success: function(html){
$('.rd_id_pos_1').html(html);
$('.rd_id_pos_2').html('<option value="">Choose 1. Pos. </option>');
$('.rd_id_pos_3').html('<option value="">Choose 1. Pos. </option>');
$('.rd_id_pos_4').html('<option value="">Choose 1. Pos. </option>');
$('.rd_id_pos_5').html('<option value="">Choose 1. Pos. </option>');
}
});
}else{
$('.rd_id_pos_1').html('<option value="">Choose exam</option>');
$('.rd_id_pos_2').html('<option value="">Choose exam</option>');
$('.rd_id_pos_3').html('<option value="">Choose exam</option>');
$('.rd_id_pos_4').html('<option value="">Choose exam</option>');
$('.rd_id_pos_5').html('<option value="">Choose exam</option>');
}
});
$('.rd_id_pos_1').on('change',function(){
var rd_idID = $('.rd_id').val();
var rd_id_pos_1ID = $(this).val();
if(rd_id_pos_1ID){
$.ajax({
type: 'POST',
url: 'ajaxProcessor.php',
data: 'rd_id='+rd_idID,
success: function(html){
$('.rd_id_pos_2').html(html);
$('.rd_id_pos_3').html('<option value="">Choose 2. Pos.</option>');
$('.rd_id_pos_4').html('<option value="">Choose 2. Pos.</option>');
$('.rd_id_pos_5').html('<option value="">Choose 2. Pos.</option>');
}
});
}else{
$('.rd_id_pos_2').html('<option value="">Choose 1. Pos.</option>');
$('.rd_id_pos_3').html('<option value="">Choose 1. Pos.</option>');
$('.rd_id_pos_4').html('<option value="">Choose 1. Pos.</option>');
$('.rd_id_pos_5').html('<option value="">Choose 1. Pos.</option>');
}
});
$('.rd_id_pos_2').on('change',function(){
var rd_idID = $('.rd_id').val();
var rd_id_pos_2ID = $(this).val();
if(rd_id_pos_2ID){
$.ajax({
type: 'POST',
url: 'ajaxProcessor.php',
data: 'rd_id='+rd_idID,
success: function(html){
$('.rd_id_pos_3').html(html);
$('.rd_id_pos_4').html('<option value="">Choose 3. Pos.</option>');
$('.rd_id_pos_5').html('<option value="">Choose 3. Pos.</option>');
}
});
}else{
$('.rd_id_pos_3').html('<option value="">Choose 2. Pos.</option>');
$('.rd_id_pos_4').html('<option value="">Choose 2. Pos.</option>');
$('.rd_id_pos_5').html('<option value="">Choose 2. Pos.</option>');
}
});
$('.rd_id_pos_3').on('change',function(){
var rd_idID = $('.rd_id').val();
var rd_id_pos_3ID = $(this).val();
if(rd_id_pos_3ID){
$.ajax({
type: 'POST',
url: 'ajaxProcessor.php',
data: 'rd_id='+rd_idID,
success: function(html){
$('.rd_id_pos_4').html(html);
$('.rd_id_pos_5').html('<option value="">Choose 4. Pos.</option>');
}
});
}else{
$('.rd_id_pos_4').html('<option value="">Choose 3. Pos.</option>');
$('.rd_id_pos_5').html('<option value="">Choose 3. Pos.</option>');
}
});
$('.rd_id_pos_4').on('change',function(){
var rd_idID = $('.rd_id').val();
var rd_id_pos_4ID = $(this).val();
if(rd_id_pos_4ID){
$.ajax({
type: 'POST',
url: 'ajaxProcessor.php',
data: 'rd_id='+rd_idID,
success: function(html){
$('.rd_id_pos_5').html(html);
}
});
}else{
$('.rd_id_pos_5').html('<option value="">Choose 4. Pos.</option>');
}
});
// EXAMS
// MAX INPUT ALLOWED
var mz_max_fields = 15;
// FIELDS WRAPPER
var mz_wrapper = $(".mz_input_fields_wrap");
// ADD BUTTON ID
var mz_add_button = $(".mz_add_field_button");
// INITIAL TEXT BOX COUNT
var mz_x = 1;
// ON ADD INPUT BUTTON CLICK
$(mz_add_button).click(function(e){
e.preventDefault();
// MAX INPUT ALLOWED
if(mz_x < mz_max_fields){
// TEXT BOX INCREMENT
mz_x++;
// ADD INPUT BOX
$(mz_wrapper).append("<div><table id='addmz' width='385px' cellspacing='5px' style='border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;'><tr><th colspan='2'> </th></tr><tr><th colspan='2'><hr class='white-hr' /></th></tr><tr><th colspan='2'> </th></tr></table><a href='#' class='mz_remove_field'><table id='addmz' width='385px' cellspacing='5px' style='border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;'><tr><th align='left'>Delete Exam</th><th align='right'><font color='#FFD700'>[–]</font></th></tr></table></a><tr><th colspan='2'><hr /></th></tr></table><table width='385px' cellspacing='5px' style='border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;'><tr><td align='left'>Exam<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_" + mz_x +"' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;' required='required'><? if($anzahl_option > 0) { echo "<option value=''>Choose exam</option>"; while($row = mysqli_fetch_assoc($result_option)) { echo "<option value='".$row["rd_id"]."'>".$row["rd_type"].$row["rd_id"].$what."</option>"; } } elseif($anzahl_option == 0) { echo "<option value=''>No exams available</option>"; } ?></select></td></tr><tr><td align='left'>1. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_1' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr><tr><td align='left'>2. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_2' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr><tr><td align='left'>3. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_3' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr><tr><td align='left'>4. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_4' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr><tr><td align='left'>5. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_5' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr></tr></table></div>");
}
});
// USER CLICK TO REMOVE TEXT
$(mz_wrapper).on("click",".mz_remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove();
mz_x--;
});
});
<!-- END OF JS/JQUERY -->
答
我发现它自己。如上所述，我想实现附加内容能够触发AJAX。因此，而不是（例如。）：
$('.rd_id_pos_1').on('change', function(){ /* see fiddle for the rest */ }
我改成：
$(document).on('change', '.rd_id_pos_1', function(){ /* see fiddle for the rest */ }
因此，而不是选择所述I类简单地选择的文档，其中类是所附内容。工作正常。
提示：没有在小提琴中实现，所以帮助自己。
我认为问题在于您将HTML选项添加到选择框中。你是否尝试创建对象并将它们追加？ –
所以不要说'$（'。rd_id_pos_3'）。html（''）;'用$（'
不要误解我的意思。整个故事就这样运作。我只需要一个解决方案，使它也适用于附加的选择选项。或者我错了吗？ – montreal