Изменение значений в <select> с помощью другого <select> с использованием 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, поэтому я довольно сильно нажимаю на стену здесь. Хотел, чтобы кто-нибудь мог мне помочь.

заранее спасибо

Пока у меня это

  $(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.

Вы должны включить библиотеку jQuery между вашими тегами html <head> следующим образом: (если у вас уже включен 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 loop te, чтобы получить полный массив в вашем javascript)

Смотри ниже

Если вы хотите сделать это правильно, вы можете захотеть подключить точки в базе данных и вместо этого использовать соединения sql. Это сэкономит вам много кода и упростит все это. Однако, поскольку вы, вероятно, этого не сделали, есть только один правильный способ решить эту проблему. Видите ли, вы не можете использовать ajax для определенной функции. Вам нужно будет сделать php-скрипт.

Вы сделаете, например, «getMedics.php».

Затем вы вызовете файл «getMedics.php» при вызове ajax, когда выбор изменится, например:

 //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