使用AJAX(PHP)使用另一个</select>更改<select>中的值

时间:2014-06-17 22:22:01

标签: javascript php jquery html ajax

我尝试使用其他选择

更改选择的值

正如您所看到的,两个选择都是使用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知之甚少,所以我在这里碰壁了。希望有人能帮助我。

提前致谢

到目前为止,我有这个

    $(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;
}

很抱歉没有首先添加此代码

2 个答案:

答案 0 :(得分:1)

你最好将它分成几步,这是(我认为)理解它的最简单方法。

我不确定如何在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语句重写它们。他们不添加或减少。他们完全取代了。

<强>!EDIT!

我看到你编辑了你的问题。现在我可以正常帮助。我将留下上面的“教程”以供参考。 (顺便说一下,你可以使用一个php foreach循环te,也可以将完整的数组放入你的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;

答案 1 :(得分:0)

由于您没有代码可以显示您尝试过的内容,因此我会尝试从头开始帮助您。这可能与您的解决方案类似:

$("#firstSelect").change(function(){
    $.post(
        "url/to/get/ajax/from",
        {dataToSend: $("this").val()},
        function(data){$("#selectToChange").val(data)}
    );
)};

语法或某些东西可能会关闭,但这可能会让您至少在正确的方向上。 ps包括jquery