获取选择框以在不同的选择框中显示所选值

时间:2018-03-27 11:42:56

标签: javascript php jquery mysql ajax

我有两个选择框,我想在其中选择一个值,第二个选择框应该得到相同的值。 目前我正在传递id,并希望我的指定也传递给ajax。我能否知道如何通过ajax实现这一点。任何帮助将受到高度赞赏。

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

我的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>';
        }
      }
    }
  }

?>

1 个答案:

答案 0 :(得分:0)

你可以做的是,在你通过AJAX加载的单独文件中有第二个选择(需要与第一个相同的值)。

AJAX功能:

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);                   
    }
  })
}

这样做的是,当调用selection()函数时,它会将第一个select的选定值发布到“escalation_ajax.php”。然后它会将该页面加载到一个元素(我的示例中为div元素),其id为“secondSelectorDiv”。

带有该函数的select的html(在本例中我将调用onchange),如下所示:

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

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

现在在escalation_ajax.php中,您可以检索post变量并使用它来查找第二个选择的ID。

<?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>';
  }
?>

如果你想在第一个选择有一个值之前显示第二个选择,你可以简单地调用一个AJAX函数,该函数在页面加载的第二个选择中加载。

重要!: 您应该切换到mysqli_ *或PDO,而不是使用已弃用的mysql_ *。你应该至少考虑对你的输入进行消毒。