如何从下拉菜单显示数据到文本输入

Question

我在各自的文本输入中显示SessionName ， SessionDate和SessionTime遇到麻烦。

应该发生的情况是，用户应该从下拉菜单中选择一个会话（评估）。 现在，当他们提交下拉菜单时，应该在其文本输入中显示Session的详细信息SessionName ， SessionDate和SessionTime 。 但是它们没有显示在文本输入中，文本输入保持为空。

如何获取SessionName ， SessionTime和SessionDate分别显示在它们的文本输入中？

这是一个jsfiddle ，其中包含伪数据和相关功能，以显示应用程序的外观：

这是我的代码：

$sessionquery = "
SELECT SessionId, SessionName, SessionDate, SessionTime, ModuleId
FROM Session
WHERE
(ModuleId = ?)
ORDER BY SessionDate, SessionTime 
";

$sessionqrystmt=$mysqli->prepare($sessionquery);
// You only need to call bind_param once
$sessionqrystmt->bind_param("s",$_POST['modules']);
// get result and assign variables (prefix with db)

$sessionqrystmt->execute(); 

$sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbModuleId);

$sessionqrystmt->store_result();

$sessionnum = $sessionqrystmt->num_rows();   

if($sessionnum ==0){
echo "<p>Sorry, You have No Assessments under this Module</p>";
} else { 

$sessionHTML = '<select name="session" id="sessionsDrop">'.PHP_EOL;
$sessionHTML .= '<option value="">Please Select</option>'.PHP_EOL;           

while ( $sessionqrystmt->fetch() ) {
    $sessionHTML .= sprintf("<option value='%s'>%s - %s - %s</option>", $dbSessionId, $dbSessionName, $dbSessionDate, $dbSessionTime) . PHP_EOL;  
}

$sessionHTML .= '</select>';

$assessmentform = "<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post' onsubmit='return sessionvalidation();'>
<p>Assessments: {$sessionHTML} </p>
<p><input id='sessionSubmit' type='submit' value='Submit Assessment' name='sessionSubmit' /></p>  
<div id='sessionAlert'></div>    
</form>";

echo $assessmentform;

}

}

 if (isset($_POST['sessionSubmit'])) {

$currentsession = "<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post'>
<p>Current Assessment's Date/Start Time:</p>
<p>Assessment: <input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly' value='{$dbSessionName}'/> </p>
<p>Date: <input type='text' id='currentDate' name='Datecurrent' readonly='readonly' value='{$dbSessionDate}'/> </p>
<p>Start Time: <input type='text' id='currentTime' name='Timecurrent' readonly='readonly' value='{$dbSessionTime}'/> </p>
<input type='hidden' id='hiddenId' name='hiddenAssessment' value='{$dbSessionId}'/>
</form>
";  

echo $currentsession;

    }

Answer 1

尝试这个

演示

function fillData(){
var sel = document.getElementById('sessions').options[document.getElementById('sessions').selectedIndex].text;
var arr = sel.split(" - ");
 if(document.getElementById('sessions').value != ''){
    document.getElementById('currentAssessment').value = arr[0];
    document.getElementById('currentDate').value = arr[1];
    document.getElementById('currentTime').value = arr[2];                     
 } else {
    alert('please select option');
 }
}​

<p><input id='sessionSubmit' type='submit' value='Submit Assessment' name='sessionSubmit' onclick='fillData();' /></p>

Answer 2

function SessionSplit()
{
 str=$("#sessions option:selected").text();
 substr=str.split(' - ');
 sessionname=substr[0];
 sessiondate=substr[1];
 sessiontime=substr[2];

}

$('#sessionSubmit').click(function(){

$('#currentAssessment').val(sessionname);
    $('#currentDate').val(sessiondate);
    $('#currentTime').val(sessiontime);

});

观看演示

Answer 3

如果jQuery是一个选项（并且您可能会觉得不需要该button ），这是另一个选项

$(document).ready( function(){
    $('#sessions').change( function(){
        if( $(this).val() !== '' ){
            var text = $(this).find('option:selected').text();
            var split = text.split(' - ');
            $('#currentAssessment').val( split[0] );     
            $('#currentDate').val( split[1] );     
            $('#currentTime').val( split[2] );     
        }
        else{
            $('#currentAssessment,#currentDate,#currentTime').val('');                  
        }
    });
});​

它在我编辑您的小提琴以显示它的select .change()事件上.change() 。