1
こんにちは仲間プログラマのエリート！選択に基づいて選択オプションを取得してDIVを動的に追加する
私は現在、私の他のスクリプトの組み合わせになるスクリプトに取り組んでいます。
- 最初に、選択フィールドのセットを含む複数のDIVを追加できます。プライマリはデータベースからセレクトオプションをフェッチし、他の5つは選択するまで無効になります。
- もう一方は、選択したオプションに基づいて選択オプションをフェッチして、選択肢;フィドルを参照してください）
私は選択フィールドの最初のセットのみが動作することを意味し、「静的な」バージョンを書くために管理ATM（など、有効化、フェッチ）はなく、添付されている1スクリプトでは動作しません。
多分私は複雑すぎると思っていますが、すでにクラスとIDを試しています。彼らの誰も私のために働くように見えませんでした。
私が追加したいのは、javascript/jQueryの知識がであり、という経験がありましたので、私は助けが必要です。あなたの下には、私の現在の進歩のコードと準備が整いました。
フェッチするスクリプトは$ _POSTを渡すだけであり、my dbで検索する値を照会することに注意してください。このスクリプトは、フィドルには追加されません。必要に応じて追加しますが、考えた限り、これは単なる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 -->
JSFiddle - Dynamic Add with dependant select option each
私は問題が選択ボックスにHTMLオプションを追加する場所だと思います。オブジェクトを作成して代わりにオブジェクトを追加しようとしましたか？ –
のように '$（ '。rd_id_pos_3'）.html（ ''）;' $（ '
間違ってはいけません。全体の話はそのままです。私はそれが付加された選択オプションのために働くようにするための解決策が必要です。または私はあなたが間違っていますか？ – montreal