如何通过AJAX请求为动态内容设置下拉列表的默认值

时间:2015-12-15 18:09:03

标签: ajax dynamic default dropdown

我对AJAX和javascript没有经验,我目前正在尝试创建一个动态下拉列表来解决以下问题:

用户可以从下拉列表中选择是否针对1或2名学生。如果他没有选择任何内容,则仅显示1名学生的内容。如果他选择2名学生,则应显示2名学生的内容,而不是1名学生的内容。现在的问题是,我知道如何设置动态下拉列表以及如何调用动态内容,但我不知道如何动态替换内容,这意味着如果用户没有显示内容,则当前没有显示任何内容。 #39; t选择任何东西。我也尝试通过在user.php中设置的SESSION来做到这一点,但我不知道如何通过AJAX请求来设置它。

我目前正在使用此页面来显示下拉列表和内容:

<p>How many students? <br />
<select name="numberstudents" id="user-select">
<option value="1">1 student</option>
<option value="2">2 students</option>
</select>
</p>

// This is where the content from user.php should be displayed:

<div id="user-profile"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/global.js"></script>

包含AJAX的.js文件:

$('#user-select').on('change', function() {
var self = $(this);

$.ajax({
    url: 'https://www.xxx.de/partials/user.php',
    type: 'GET',
    data: { numberstudents: self.val() },    
    success: function(data){
      $('#user-profile').html(data);
    }
});
});

user.php,其中包含应由主窗体页面上的AJAX请求显示的内容。它应该询问每个&#34; if-request&#34;如果选择了1或2名学生,然后显示一个下拉列表或两个下拉列表,如果选择了2个学生。问题是,如果没有选择任何内容,它就不会显示任何内容:

<?php
// Connection to the DB and get the input for the dropdown list(s)
$dsn = "xxx";
$user = "xxx";
$pw = "xxx";

try {
$pdo = new PDO($dsn, $user, $pw);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}

$classQuery = "SELECT class_id, class FROM classes";

$classes = $pdo->query($classQuery);
?>

// And the if-request if 1 student or 2 students are selected, thus showing either 1 or 2 dropdowns     

if ($_GET['numberstudents'] == "2") {
?>

<p>Which classes do the students visit?<br />

<select name="class1">
<option value="">Student 1 visits the..</option>
<?php foreach ($classes->fetchAll() as $class){ ?>
  <option value="<?php echo $class['class_id']; ?>"><?php echo $class['class']; ?></option>
<?php } ?>
</select><br />

<select name="class2" >
<option value="">Student 1 visits the..</option>
<?php foreach ($classes->fetchAll() as $class){ ?>
  <option value="<?php echo $class['class_id']; ?>"><?php echo $class['class']; ?></option>
<?php } ?>
</select>
</p>

<?php
}
else
{
?>
<p>Which class does the student visit?<br />
<select name="class1">
<option value="">Please select a class..</option>
<?php foreach ($classes->fetchAll() as $class): ?>
  <option value="<?php echo $class['class_id']; ?>"><?php echo     $class['class']; ?></option>
<?php endforeach; ?>
</select>
</p>
<?php
}
?>

请原谅我的错误,将代码翻译成英文,以便更容易理解。

0 个答案:

没有答案