getting select box to display selected value in different select box

Question

I have two select boxes in which I want to select a value for one and the second select box should get same value. Currently I am passing id and want my designation also to pass to ajax. Can I know how this can be implemented via ajax. Any help will be highly appreciated.

      <select name="designation" class="form-control"  id="desig" >
        <option value="">Select a Designation/Role</option>
       <?php 

            $sql = mysql_query("SELECT id, designation FROM tbl where status =1 and designationtype_id = 1 ");
                  while ($rows = mysql_fetch_assoc($sql)){   
                echo "<option value=" . $rows['id'] . ">" . $rows['designation'] . "</option>";
         }

?>      <select name="dd" id="dd" class="form-control" disabled>
        <option value=""></option>
      </select> 

My AJAX,

  <script type="text/javascript">

  $(document).ready(function() {

    $("#desig").change(function() {
      var id = $(this).val();
      var dataString1 = 'id=' + id;
      var des = $(this).val();
      var dataString2 = 'designationname=' + des;
      $.ajax({
        type: "POST",
        url: "escalation_ajax.php",
        data: dataString,
        cache: false,
        success: function(html) {
          var data = html.split(",");

          $('#rephead').val(data[0]);

        }
      });
    });
  });
</script>

escalation_ajax.php

<?php

if ($_POST['id'])
  {
  if ($_POST['des'])
    {
    $des_id = $_POST['id'];
    $designation = $_POST['des'];
    $sql = mysql_query("SELECT designation_id, reporting_head FROM aafmindia_in_sbi.tbl_reporting_head WHERE status=1 and  reporting_head_for='$des_id'");
    if ($sql === FALSE)
      {
      trigger_error('Query failed returning error: ' . mysql_error() , E_USER_ERROR);
      }
      else
      {
      while ($row = mysql_fetch_array($sql))
        {
        $id = $row['designation_id'];
        $reporting_head = $row['reporting_head'];
        echo '<option value="' . $id . '">' . $reporting_head . '</option>' . ',' . '<option value="' . $des_id . '">' . $designation . '</option>';
        }
      }
    }
  }

?>

Answer 1

What you could do, is have the second select (the one that needs the same value as the first) in a seperate file that you load via AJAX.

AJAX function:

function selection()
{
  var selectValue=$("select#dd option:selected").val();

  $.ajax({
    type : "POST",
    url : "escalation_ajax.php",
    data : { id : selectValue },
    success: function (html) {
      $("#secondSelectorDiv").html(html);                   
    }
  })
}

What this does, is that when the selection() function is called, it will post the selected value of the first select to "escalation_ajax.php". It will then load that page into an element (div element in my example) with the id "secondSelectorDiv".

The html for the select with the function (which I will call onchange in this example), can look like this:

<select id="dd" onchange="selection();">
  <option value=""></option>
</select>

<div id="secondSelectorDiv"></div>

Now in escalation_ajax.php you can retrieve the post variable and use it to look for the id in question for the second select.

<?php
$id=$_POST['id'];

/*
If you're using the id to fetch something in your database,
which it looks like you're doing, then use the post variable
to fetch your rows and build the select from that.
*/

$sql="SELECT * FROM table_name WHERE id='$id'";
$result_set=mysql_query($sql);                                   
$row=mysql_fetch_array($result_set);

$count=mysql_num_rows(result_set);
$counter=0;

//this is the id you will check for in order to see what's to be selected
$idToCheck=$row['id'];
?>
<select id="dd2">
  while($count > $counter)
  {
    counter++;

    echo '<option value=""'; if($idToCheck == $id){ echo 'selected="selected"'; } echo '></option>';
  }
?>

If you want the second select to be displayed before the first select has a value, you can simply just call an AJAX function that loads in the second select on page load.

IMPORTANT!: You should really switch to mysqli_* or PDO instead of using the deprecated mysql_*. You should at the very least look into sanitizing your inputs.