更改<select>中的值使用另一个<select>使用AJAX (PHP)
Changing the values in a <select> using another <select> using AJAX (PHP)
我正在尝试使用另一个select
更改select的值可以看到,两个选择都是使用PHP填充的。
现在我想要的是,当选择一个特定的专业,选择包含医生会改变。
下面是代码
<select id="specialties" class = "formulario_text">
<?php foreach ($specialties as $especialidade_id => $especialidade) { ?>
<option value="<?php echo $especialidade_id; ?>"><?php echo $especialidade; ?></option>
<?php
}
?>
</select>
<br>
<br>
<label>
<b class="formulario_labels2">Médico:*</b>
</label>
<br>
<select id="medics" class="formulario_text">
<?php foreach ($medics as $id => $nome) { ?>
<option value="<?php echo $id; ?>"><?php echo $nome; ?></option>
<?php
}
?>
</select>
我对AJAX, PHP和Javascript知之甚少,所以我在这里几乎碰壁。我希望有人能帮助我。
Thanks in advance
到目前为止我有这个
$(document).ready(function() {
$("#specialties").change(function() {
var val = $(this).val();
if (val == "16") {
$("#medics").html("<option value='1'> <?php $medics[1]; ?> </option>");
}
});
});
我正在测试是否可以捕获我在另一个文件中的$medics数组的第一个位置。
$specialties = model'ClinicalSpecialty::getSpecialties();
$medics = model'Medic::getMedics();
方法是这样工作的
static function getSpecialties(){
$res = array();
$db = new DBAccess();
if($db->conn){
$query = 'select id,name from clinical_specialty';
$result_set = $db->conn->query($query);
while ($row = $result_set->fetch_assoc()) {
$res[$row['id']] = $row['name'];
}
$result_set->free();
$db->conn->close();
}
return $res;
}
抱歉一开始没有添加这段代码
你最好把它分成几步,这是(我认为)最容易理解的方法。
我不知道如何包含这个与你的PHP,因为我不知道你的代码的其余部分。我将给您一个静态示例,您必须自己将其与PHP结合使用。我希望这对你有帮助!
步骤1:包含jquery
你必须在你的html <head>
标签之间包含jQuery库,像这样:(如果您已经包含了jQuery,请跳过此步骤)
<!--including jQuery here -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
步骤2:在javascript中工作首先,你必须触发一个onload回调,这样你的函数就知道什么时候关闭,像这样:
<script>
//When page is done loading
$(document).ready(function(){
});
</script>
步骤3:大脚本
//When page is done loading
$(document).ready(function() {
// let's get your select first!
var firstSelector = $('#yourSelectID');
var medicSelector = $('#yourMedicSelectID');
//we will fill this variable on select changes
var currentSelection = firstSelector.val();
//set initial medic values
medicSelector.html(
"your options here as strings (between the quotes). see below for example"
);
//get value on change
firstSelector.change(function() {
currentSelection = $(this).val();
//check if the current value is what you want
if (currentSelection == "1") {
//This replaces the options completely
medicSelector.html(
//you can use any PHP variable here to fill it.
//Just use <?php echo $optionsforthischoice ?>
// $optionsforthischoice would be filled like so:
// $optionsforthischoice = "<option>option1</option><option>option2</option> etc.;
"<option>option1</option><option>option2</option><option>option3</option>"
);
}
if (currentSelection == "2") {
// do the same here as for 1, but when 2 is selected!
}
});
});
重要提示:正如你所看到的,这种风格是静态的。如果你想要一个更动态的解决方案,你将给我们提供更好的信息和更多的代码。
这个Javascript取代了你之前的选项,所以你必须为每个if语句重写它们。它们不能做加法或减法。它们完全取代了。
编辑!
我看到你编辑了你的问题。现在我可以帮上忙了。我将把上面的"教程"留作参考。(顺便说一下,你可以使用php foreach循环来获得完整的数组到你的javascript)
见下文
如果你想正确地做到这一点,你可能想要连接数据库中的点,而不是使用sql连接。这将为您节省大量代码,并使整个过程更容易。然而,因为你可能没有,只有一个正确的方法来解决这个问题。您可以看到,不能在特定函数上使用ajax。你必须编写一个php脚本。
你将创建例如"getMedics.php"
当选择改变时,您将使用ajax调用"getMedics.php"文件,如下所示:
//The first option is the link to the file
//The ?specialty is a parameter which you are going to get in the script.
//This will be the selection that was made before
//Within the function "result" will be the variable with the values the phpscript returns
$.get('phpscripts/getMedics.php?specialty=' + $("#specialties").val(), function(result) {
//if the result returned anything
if (result.trim()) {
//you will want the result to be the options
$('#medics').html(result);
}
});
现在php脚本将更加棘手。这是它看起来的样子:
//get the specialty ID
$specialty = strip_tags($_GET['specialty']);
//get the medics
//i'm guessing the results will be arrays within arrays
$medics = Medic::getMedics();
//set the array for the options
$options = array();
//prepare our results
$optionResults = "";
switch ($specialty) {
case 0:
$options[1] = "1";
$options[2] = "2";
$options[3] = "5";
$options[4] = "7";
break;
case 1:
$options[1] = "1";
$options[2] = "2";
$options[3] = "5";
$options[4] = "7";
break;
case 2:
echo "specialty equals 2";
break;
}
//this foreach loop will pass the options to a variable
foreach($option as $options){
//.= adds to the variable
$optionResults .= "<option value='".$medics[$option][0]."'>".$medics[$option][1]."</option>";
}
//this is what will return as the ajaxed results:
echo $optionResults;
由于您没有代码来显示您所做的尝试,我将尝试从头开始帮助您。这可能与您的解决方案类似:
$("#firstSelect").change(function(){
$.post(
"url/to/get/ajax/from",
{dataToSend: $("this").val()},
function(data){$("#selectToChange").val(data)}
);
)};
语法或其他东西可能是错误的,但这至少可以使您朝着正确的方向前进。Ps包含jquery
- $(select).selectmenu('打开')不'如果使用ajax加载页面,则不起作用
- 需要将select标记选项值传递给ajax函数
- php使用ajax创建了select标记
- 我可以't从通过Ajax创建的select元素中设置值或获取值
- ajax表单每触发第n个select onchange事件就发送n次
- 使用PHP和AJAX更新select下拉选项
- jQuery——更改SELECT中的值不会触发AJAX事件
- ajax刷新后保留select下拉值
- Ajax on select control Jquery javascript?
- 使用 JavaScript 和 AJAX 选项创建 Select HTML
- jQuery select menu ajax 3 levels
- 使用 ui-select 与 Angularjs 和 ajax 值
- HTML Select 字段通过 ajax 调用 Web 服务
- 通过 Javascript/Jquery/AJAX 将 Select Value 传递给 php varibale
- 没有响应.chzn-select两个带有ajax和codeigniter的下拉列表
- jQuery.ajax post从select标记返回从onchange事件调用的页面的整个html
- Select上通过Ajax将Javascript变量传递到PHP文件中的问题
- 如何使用ajax在select下拉列表中填充json数据
- 具有预选值的Ajax Select
- 当通过AJAX绑定选项时,是否可以将select元素的默认值传递给Knockout