php - テキスト入力にデータを追加し、ドロップダウンメニューでデータを選択する方法は?

Question

私はここで見ることができる簡単なアプリケーションを持っています:アプリケーション

アプリケーションでは、ドロップダウンメニューが表示されます。ドロップダウンメニューからコースを選択するだけで、以下のテキスト入力に詳細が表示されます。

以下は、アプリケーションのコードです。

Javascript:

<script type="text/javascript">

$(document).ready( function(){
$('#coursesDrop').change( function(){
if( $(this).val() !== '' ){
var text = $(this).find('option:selected').text();
var split = text.split(' - ');
$('#currentCourseNo').val( split[0] );     
$('#currentCourseName').val( split[1] );       
$('#newCourseNo').val( split[0] );  
$('#newCourseName').val( split[1] ); 
}
else{
$('#currentCourseNo,#currentCourseName,#currentDuration').val('');   
$('#newCourseNo,#newCourseName,#newDuration').val('');                 
}
});
});



</script>

PHP/HTML:

<?php

// connect to the database
include('connect.php');

/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
die();
}

?>

<h1>EDIT COURSE</h1>

<?php

$min_year = 1;
$max_year = 10;
$years = range($min_year, $max_year); // returns array with numeric values of 1900 - 2012
$durationHTML = '';
$durationHTML .= '<select name="duration" id="newDuration">'.PHP_EOL; 
$durationHTML .= '<option value="">Please Select</option>'.PHP_EOL;  

foreach ($years as $year) {
$durationHTML .= "<option>$year</option>".PHP_EOL;  
if ($year != $max_year) {
$nextYear = $year + 1;
$durationHTML .= "<option>$year/$nextYear</option>".PHP_EOL;              
}
}
$durationHTML .= '</select>'; 

$newCourseNo = (isset($_POST['CourseNoNew'])) ? $_POST['CourseNoNew'] : '';

$coursequery = "
SELECT CourseId, CourseNo, CourseName, Duration
FROM Course
ORDER BY CourseNo
";

$courseqrystmt=$mysqli->prepare($coursequery);
// You only need to call bind_param once

$courseqrystmt->execute(); 

$courseqrystmt->bind_result($dbCourseId,$dbCourseNo,$dbCourseName,$dbDuration);

$courseqrystmt->store_result();

$coursenum = $courseqrystmt->num_rows();     

$courseHTML = '';

$courseHTML = '<select name="courses" id="coursesDrop">'.PHP_EOL;
$courseHTML .= '<option value="">Please Select</option>'.PHP_EOL;           

while ( $courseqrystmt->fetch() ) {

$courseHTML .= sprintf("<option value='%s'>%s - %s</option>", $dbCourseId,$dbCourseNo,$dbCourseName) . PHP_EOL; 
}


$courseHTML .= '</select>';


$courseform = "
<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post' id='courseForm'>
<p><strong>Course:</strong> {$courseHTML} </p>   
</form>";

echo $courseform;



$editsession = "
<form id='updateCourseForm'>

<p><strong>Current Course Details:</strong></p>
<table>
<tr>
<th>Course ID:</th>
<td><input type='text' id='currentCourseNo' name='CourseNocurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Course Name:</th>
<td><input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Duration (Years):</th>
<td><input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='currentAlert'></div>

<p><strong>New Course Details:</strong></p>
<table>
<tr>
<th>Course ID:</th>
<td><input type='text' id='newCourseNo' name='CourseNoNew' value='' /> </td>
</tr>
<tr>
<th>Course Name:</th> 
<td><input type='text' id='newCourseName' name='CourseNamenew' value='' /> </td>
</tr>
<tr>
<th>Duration (Years):</th> 
<td>{$durationHTML}</td>
</tr>
</table>
<div id='newAlert'></div>

</form>

";

echo $editsession;


?>

</body>
</html>

現在、コースの期間を扱う2つの小さな問題があります。

問題 1:

コースを選択したアプリケーションでは、「現在のコースの詳細」セクションの下に、コース ID とコース名のテキスト入力が入力されているが、期間のテキスト入力が入力されていないことがわかります。他の 2 つのテキスト入力を入力するようにコーディングしたのと同じ方法で、期間のテキスト入力を入力します。これは、ドロップダウンメニューに各コースの期間を含めたくないからです。私の質問は、コースがドロップダウンメニューから選択されたときに、選択したコースの期間テキスト入力を入力できるようにするための正しい最良の方法は何ですか?

問題 2:

これは問題 1 に似ていますが、これは「コースの詳細の更新」セクションの期間のドロップダウンメニューを扱っています。私が望むのは、ユーザーがコースを選択したときに、選択したコースの期間を [期間] ドロップダウンメニューで選択する必要があるということです。現時点では、ユーザーがコースを選択した後、期間のドロップダウンメニューに「選択してください」と表示されます。

アップデート：

に id='data' を追加しました<td>{$durationHTML}</td>。

以下はJavaScriptです：

var data = document.getElementById('newDuration').value;

$('#coursesDrop').change(function()
{
  var index = this.selectedIndex;

  /* part 1 */
  var data_to_display = data[index];
  $('#data').text(data_to_display);

  /* part 2 */    
  $('#durationDrop')[0].selectedIndex = index;    

}).trigger('change');

選択したコースの期間ドロップダウンメニューから期間を選択しないため、上記のコードは機能しません。私は間違って何をしていますか?

コースの詳細は、以下のデータベースから取得されます。

コース表:

CourseId CourseNo CourseName                             Duration
1        INFO101  Information Communication Technology   3/4
2        INFO102  Computing                              2

これで、コースのドロップダウンに、データベースからのコース情報が次のように表示されます。

Please Select
INFO101 - Information Communication Technology
INFO102 - Computing

以下は、期間ドロップダウンメニューの外観です。

Please Select
1
1/2
2
2/3
3
3/4
4
4/5
5
5/6
6
6/7
7
7/8
8
8/9
9
9/10
10

ここで、コースのドロップダウンメニューで以下のコースを選択すると、次のようになります。

INFO101 - Information Communication Technology

次に、データベースでわかるように、このコースの期間はです。ユーザーがコースのドロップダウンメニューでコースを3/4選択したら、期間のドロップダウンメニューで3/4オプションを選択する必要がありINFO101 - ....ます。

ここで、コースのドロップダウンメニューで以下のコースを選択すると、次のようになります。

INFO102 - Computing

次に、データベースでわかるように、このコースの期間はです。ユーザーがコースのドロップダウンメニューでコースを2選択したら、期間のドロップダウンメニューで2オプションを選択する必要がありINFO102 - ....ます。

わからないことがあればコメントください:)

更新 2:

<?php

// connect to the database
include('connect.php');


/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    die();
}

?>

<h1>EDIT COURSE</h1>

<?php

$min_year     = 1;
$max_year     = 10;
$years        = range($min_year, $max_year); // returns array with numeric values of 1900 - 2012
$durationHTML = '';
$durationHTML .= '<select name="duration" id="newDuration">' . PHP_EOL;
$durationHTML .= '<option value="">Please Select</option>' . PHP_EOL;

foreach ($years as $year) {
    $durationHTML .= "<option>$year</option>" . PHP_EOL;
    if ($year != $max_year) {
        $nextYear = $year + 1;
        $durationHTML .= "<option>$year/$nextYear</option>" . PHP_EOL;
    }
}
$durationHTML .= '</select>';

$newCourseNo = (isset($_POST['CourseNoNew'])) ? $_POST['CourseNoNew'] : '';

$coursequery = "
SELECT CourseId, CourseNo, CourseName, Duration
FROM Course
ORDER BY CourseNo
";

$courseqrystmt = $mysqli->prepare($coursequery);
// You only need to call bind_param once

$courseqrystmt->execute();

$courseqrystmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName, $dbDuration);

$courseqrystmt->store_result();

$coursenum = $courseqrystmt->num_rows();

$courseHTML = '';

$courseHTML = '<select name="courses" id="coursesDrop">' . PHP_EOL;
$courseHTML .= '<option value="">Please Select</option>' . PHP_EOL;

$courseInfo = array();

while ($courseqrystmt->fetch()) {
    $courseHTML .= sprintf("<option value='%s'>%s - %s</option>", $dbCourseId, $dbCourseNo, $dbCourseName) . PHP_EOL;

    $courseData               = array();
    $courseData["CourseId"]   = $dbCourseId;
    $courseData["CourseNo"]   = $dbCourseNo;
    $courseData["CourseName"] = $dbCourseName;
    $courseData["Duration"]   = $dbDuration;

    array_push($courseInfo, $courseData);
}


$courseHTML .= '</select>';


$courseform = "
<form action='" . htmlentities($_SERVER['PHP_SELF']) . "' method='post' id='courseForm'>
<p><strong>Course:</strong> {$courseHTML} </p>   
</form>";

echo $courseform;



$editcourse = "
<form id='updateCourseForm'>

<p><strong>New Course Details:</strong></p>
<table>
<tr>
<th>Duration (Years):</th> 
<td id='data'>{$durationHTML}</td>
</tr>
</table>

</form>
";

echo $editcourse;

?>

< script type = "text/javascript" > 
$(document).ready(function() {

    var courseinfo = '<?php=json_encode($courseInfo);?>';

    $('#coursesDrop').change(function() {

        var courseId = $(this).val(),
        coursedata;

        for (var i = 0, l = courseinfo.length; i < l; i++) {
            if (courseinfo[i].courseId = courseId) {
                coursedata = courseinfo[i];
            }
        }

        var index = $('#newDuration option[value="' + courseData.Duration + '"]').index('#newDuration option');

        $('#newDuration')[0].selectedIndex = index;

    });
});
 < /script>

score 1 · Accepted Answer

問題 1:

ドロップダウンのアイテムに期間を「リンク」する方法を見つける必要があるので...やりたくないこと（すべてをオプションタグに入れる）が最良の答えのようです。とにかく、javascript 配列を書き、の selectedIndex 値を使用して、次のような適切なデータを指すことができます。

$('select').change(function()
{
   var index = this.selectedIndex;
   $('input').val(duration_data[index]);
}

問題 2:

あなたが言ったように、最初と同じです。コードでデフォルト値を設定するには、selectIndex プロパティを使用します。

$('select')[0].selectedIndex = n

php - テキスト入力にデータを追加し、ドロップダウン メニューでデータを選択する方法は?

1 に答える 1

Related

Reference

php - テキスト入力にデータを追加し、ドロップダウンメニューでデータを選択する方法は?