更改<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