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

Question

我有两个选择框，我想为其中一个选择框选择一个值，第二个选择框应获得相同的值。目前我正在传递 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>';
        }
      }
    }
  }

?>

Answer 1

您可以做的是将第二个选择(需要与第一个相同值的选择)放在通过 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”。然后，它将将该页面加载到 ID 为“secondSelectorDiv”的元素(在我的示例中为 div 元素)中。

带有该函数的 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_*。您至少应该考虑清理您的输入。