v从“Web上的下拉列表”中选择文本框字段

时间:2017-01-23 09:09:28

标签: php

您好我在选择我的权限代码时尝试显示我的地址字段,但地址字段没有出现,文本也没有填写。我的知识非常有限,因为我刚刚开始学习。

主页

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
  .hide{
    display: none;
  }
  .show{
    display: block;
  }
</style>
</head>
<body>
<div class="wrapper">
  <div>
  <select name="auth" id="auth">
    <option value = "">Select</option>
    <?php

$connection = new mysqli("localhost", "null", "null", "null");
$stmt = $connection->prepare("SELECT AuthorityId FROM AuthorityList");
$stmt->execute();
$stmt->bind_result($authorityid);

while($stmt->fetch()){
    echo "<option value = '$authorityid'>$authorityid</option>";

}    
$stmt->close();
$connection->close();
?>

  </select>
</div>
</div>
<div id="address" class="hide">
  <label>Address</label>
  <textarea id='add_text' name="address"></textarea>
</div>
 </body>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
  $('#auth').change(function(){
    $.ajax({
      url:'getData.php',
      type:'POST',
      data:{
        val: $('#auth').val()
      },
      success:function(result){
          console.log(result);
          if(result != ''){
            $('#add_text').html(result);
            $('#address').removeClass('hide');
            $('#address').addClass('show');
          } else {
            $('#add_text').html('');
            $('#address').removeClass('show');
            $('#address').addClass('hide');
          }

      }
    })
  });
});

访问getdata.php

<?php

$connection = new mysqli("localhost", "null", "null", "null");

$stmt = $connection->prepare("SELECT Address FROM AuthorityList WHERE AuthorityId = '$authorityid'");

$stmt->execute();
$stmt->bind_result($address);
$stmt ->fetch();
    if($stmt -> num_rows != 0){
    echo "<br><br> $address";
    }

//echo "$address";
$stmt->close();
$connection->close();

?>

2 个答案:

答案 0 :(得分:0)

尝试使用jquery

来解决这个问题

 $(document).ready(function () {
        $('#auth').click(function () {
            if($('#auth').val() == '')
            {
                $('#address').removeClass('show');
                $('#address').addClass('hide');
            } else {
                $('#address').removeClass('hide');
                $('#address').addClass('show');
            }

        })
    })
.hide{
        display: none;
    }
    .show{
        display: block;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<label>Authorize Code</label>
<select name="auth" id="auth">
    <option value=""></option>
    <option value="1">Auth_Code_1</option>
    <option value="2">Auth_Code_2</option>
    <option value="3">Auth_Code_3</option>
    <option value="4">Auth_Code_4</option>
</select>
</div>
<div id="address" class="hide">
    <label>Address</label>
    <textarea name="address"></textarea>
</div>

我希望它有效

答案 1 :(得分:0)

Main.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
  .hide{
    display: none;
  }
  .show{
    display: block;
  }
</style>
</head>
<body>
<div class="wrapper">
  <div>
  <select name="auth" id="auth">
    <option value="">Select Auth</option>
    <option value="1">Auth_Code_1</option>
    <option value="2">Auth_Code_2</option>
    <option value="3">Auth_Code_3</option>
    <option value="4">Auth_Code_4</option>
  </select>
</div>
</div>
<div id="address" class="hide">
  <label>Address</label>
  <textarea id='add_text' name="address"></textarea>
</div>
 </body>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
  $('#auth').change(function(){
    $.ajax({
      url:'getData.php',
      type:'POST',
      data:{
        val: $('#auth').val()
      },
      success:function(result){
          console.log(result);
          if(result != ''){
            $('#add_text').html(result);
            $('#address').removeClass('hide');
            $('#address').addClass('show');
          } else {
            $('#add_text').html('');
            $('#address').removeClass('show');
            $('#address').addClass('hide');
          }

      }
    })
  });
});

getData.php(Ajax Req.File)

<?php

//echo $_POST['val'];

echo "address";

?>

在getData.php文件中,将获取地址的查询写入数据库表,并简单地回显它在地址textarea中设置的地址。试试这个。