当用户在下拉列表中选择发言人名称时，只有演讲者的专业知识才会显示在下一个主题下拉列表中。
当用户在下拉列表中选择发言人名称时，只有演讲者的专业知识才会显示在下一个主题下拉列表中。
提问于 2017-09-15 16:37:23
我想要实现的是，当用户在下拉列表中选择或选择发言人的名字时，只有演讲者的专业知识才会出现在下一个主题下拉列表中。例如。当他选择西马图女士时，话题下拉列表必须只显示西马图女士熟悉的主题，如动机、娱乐、医疗保健。当用户选择桑托斯先生时，“话题”下拉列表只能显示他知道的主题，比如“商业”和“技术”。顺便说一下，下拉列表中显示的扬声器、名称和主题来自我使用select查询和mysqli_fetch_array获得的数据库。请各位提供任何建议和帮助是非常感谢的。
我已经尝试过这个解决方案，但我在这段代码中的问题是，当我添加新的扬声器时，当我选择它们的名称时，它将不会显示任何主题。
<?php
$conn = new mysqli($servername, $username, $password, $dbname);
$selectspeakers = "SELECT * FROM speakers";
$sp_result = mysqli_query($conn, $selectspeakers);
$result = mysqli_query($conn, "SELECT speaker_fullname FROM speakers");
$storeArray = Array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$storeArray[] = $row['speaker_fullname'];
}
$msCimatuTopics = "SELECT speaker_specialization1, speaker_specialization2, speaker_specialization3, speaker_specialization4, speaker_specialization5 FROM speakers WHERE speaker_fullname = '$storeArray[0]' ";
$msCimatuTopics_result = mysqli_query($conn, $msCimatuTopics);
$mrSantosTopics = "SELECT speaker_specialization1, speaker_specialization2, speaker_specialization3, speaker_specialization4, speaker_specialization5 FROM speakers WHERE speaker_fullname ='$storeArray[1]' ";
$mrSantosTopics_result = mysqli_query($conn, $mrSantosTopics);
?>
<html>
<head>
</head>
<body>
<div class="form-group">
<label for="speaker">Preferred Speaker:</label>
<select name="speaker" class="form-control" id="speaker" style='text-transform:capitalize;'>
<?php while($array = mysqli_fetch_array($sp_result)):;?>
<option value = "<?php echo $array['speaker_fullname'];?>" <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_fullname'];?></option>
<?php endwhile;?>
</select>
</div>
<div class="form-group">
<label for="msCimatuTopics" id="topicTitle" class="hidden">Topic:</label>
<select name="topic" class="form-control hidden" id="msCimatuTopics" style='text-transform:capitalize;' autofocus required="required">
<?php $array = mysqli_fetch_array($msCimatuTopics_result);?>
<option value = "" <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> >Please Select...</option>
<option value = "<?php echo $array['speaker_specialization1'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization1']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization1'];?></option>
<option value = "<?php echo $array['speaker_specialization2'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization2']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization2'];?></option>
<option value = "<?php echo $array['speaker_specialization3'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization3']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization3'];?></option>
<option value = "<?php echo $array['speaker_specialization4'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization4']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization4'];?></option>
<option value = "<?php echo $array['speaker_specialization5'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization5']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization5'];?></option>
</select>
<select name="topic" class="form-control hidden" id="mrSantosTopics" style='text-transform:capitalize;' autofocus required="required">
<?php $array = mysqli_fetch_array($mrSantosTopics_result);?>
<option value = "" <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> >Please Select...</option>
<option value = "<?php echo $array['speaker_specialization1'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization1']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization1'];?></option>
<option value = "<?php echo $array['speaker_specialization2'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization2']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization2'];?></option>
<option value = "<?php echo $array['speaker_specialization3'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization3']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization3'];?></option>
<option value = "<?php echo $array['speaker_specialization4'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization4']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization4'];?></option>
<option value = "<?php echo $array['speaker_specialization5'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization5']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization5'];?></option>
</select>
</div>
</body>
</html>
<script>
$('#speaker').change(function(){
var selected_item = $(this).val()
if(selected_item == "Ms. Cimatu")
{
$('#msCimatuTopics').val("").removeClass('hidden')
$('#topicTitle').val("").removeClass('hidden');
$('#mrSantosTopics').val(selected_item).addClass('hidden');
}
else if(selected_item == "Mr. Santos")
{
$('#mrSantosTopics').val("").removeClass('hidden')
$('#topicTitle').val("").removeClass('hidden');
$('#msCimatuTopics').val(selected_item).addClass('hidden');
}
else
{
$('#msCimatuTopics').val(selected_item).addClass('hidden');
$('#mrSantosTopics').val(selected_item).addClass('hidden');
$('#topicTitle').val(selected_item).addClass('hidden');
}
});
</script>这是下拉列表的图像
这是数据库数据的映像。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-15 22:53:54
有一些基本的东西，你可以期待通过你的实现来改进。最大的问题是，您不需要一直在同一个表中查询不同的数据片段。如果您可以在SELECT *表上运行speakers，那么可以跳过其余的查询。
下一个任务是尽量减少代码对奇异值的依赖。如果您注意到您正在为值1、值2等编写相同的代码，那么请考虑如何抽象您的代码，以便它可以用于无限数量的值。
这是一个基于示例代码的非常粗糙的实现，实现了我提到的项目。我无法对其进行测试，因此，在达到目的之前，您可能需要调试一些小错误：
<?php
// Based on your code and image these appear to be the fields in the speakers table:
// speaker_fullname
// speaker_image
// speaker_videolink
// speaker_specialization1
// speaker_specialization2
// speaker_specialization3
// speaker_specialization4
// speaker_specialization5
// Make your connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Get speakers and all their data (you only need one query!)
$result = mysqli_query($conn, "SELECT * FROM speakers");
// Store the speakers for later
// (You could maybe use this instead but depends on your PHP version:)
// -> http://php.net/manual/en/mysqli-result.fetch-array.php
$speaker_array = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
$speaker_array[] = $row;
}
// Apparently you have session values? You don't start the session though?
// See: http://php.net/session_start
$session_speaker_fullname = ( ! empty($_SESSION["selectedSpeaker"])) ? $_SESSION["selectedSpeaker"] : '';
?>
<html>
<head>
</head>
<body>
<div class="form-group">
<label for="speaker">Preferred Speaker:</label>
<select name="speaker" class="form-control" id="speaker" style='text-transform:capitalize;'>
<option value=""></option>
<?php foreach($speaker_array as $row):;?>
<option value="<?php echo $row['speaker_fullname'];?>"
<?php if($session_speaker_fullname == $row['speaker_fullname']) echo "selected";?>
><?php echo $row['speaker_fullname'];?></option>
<?php endforeach;?>
</select>
</div>
<div class="form-group">
<label for="topic" id="topicTitle" class="hidden">Topic:</label>
<select name="topic" class="form-control" id="topic" style='text-transform:capitalize;' autofocus required="required">
<!-- this will get populated via JavaScript -->
</select>
</div>
<script type="text/javascript">
// Let your data be used by JavaScript
var speaker_array = <?php echo json_encode($speaker_array); ?>;
// A function to update the topic select
function update_topic_select_list() {
// Clear the current topic list
$('#topic').html('');
// Only re-build the topic list if a speaker is selected
if ($('#speaker option:selected').val() != '') {
var topic_array = Array();
// Find the correct speaker
for (var i = 0; i < speaker_array.length; i++) {
// The speaker name matches
if (speaker_array[i].speaker_name == $('#speaker option:selected').val())
// Add the values to the topic array
topic_array.push(speaker_array[i].speaker_specialization1);
topic_array.push(speaker_array[i].speaker_specialization2);
topic_array.push(speaker_array[i].speaker_specialization3);
topic_array.push(speaker_array[i].speaker_specialization4);
topic_array.push(speaker_array[i].speaker_specialization5);
// Stop the loop
break;
}
}
// Update the topic list
for (var i = 0; i < topic_array.length; i++) {
// Don't add empty values
if (topic_array[i] != '') {
$('#topic').append('<option value="' + topic_array[i] + '">' + topic_array[i] + '</option>');
}
}
}
}
// Watch for changes to the speaker selection
$('#speaker').change(function() {
// Do you need to do anything else?
// Call the update function
update_topic_select_list();
});
// Force a change trigger after page load - in case you need that session value set?
$('#speaker').trigger('change');
</script>
</body>
</html>Stack Overflow用户
发布于 2017-09-15 22:25:34
我建议使用AJAX。这样，当用户选择扬声器时，Javascript将请求服务器为所选扬声器提供专门化列表。例如：
<!-- This is your <select> of speakers -->
<select id="select-speaker">
<?php echo($speaker_options); ?>
</select>
<!-- This is your <select> of specializations -->
<select id="select-specialization">
<option value=""></option>
</select>
<!-- This is your JS code -->
<script>
// When users select the speaker, #select-specialization gets updated
$("#select-speaker").change(function (){
var speaker = document.getElementById("select-speaker");
GetSpecializations(speaker.value).then(function (data){
document.getElementById("select-specialization").innerHTML = data;
});
});
async function GetSpecializations(speaker){
// Request the server via AJAX the list of specializations for that speaker
var options = await AjaxPOST("page.php", speaker);
// Returns something like "<option value='spec1'>Spec1</option>..."
return options;
}
</script>这只是个主意。下面是AjaxPOST()的一个可能的实现
function AjaxPOST(url, speaker){
return new Promise(resolve => {
var http = new XMLHttpRequest();
var params = {"sentFromAJAX" : "true", "speaker" : speaker};
http.onreadystatechange = function (){
if (this.readyState == 4 && this.status == 200){
resolve(this.responseText);
}
};
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/json; charset=utf-8");
http.send(JSON.stringify(params));
});
}这是一个基本的AJAX教程。来自W3C，这是一篇关于异步/等待的有用文章。来自MDN。
P.S.：我没有测试这个代码。但这应该管用。
它缺少了PHP部分的代码。您必须处理从Javascript发送的AJAX请求。请注意，此代码发送用JSON编码的params，因此在PHP中，您必须使用类似于：$_POST的方法检索$_POST = json_decode(file_get_contents("php://input"), true) ?: [];变量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46244134
复制相关文章
相似问题
腾讯云开发者
