如何从拖拽输入字段获取值并存储在php变量中

时间:2017-12-28 04:25:24

标签: javascript php jquery

我有三个下拉输入字段,我想根据其他输入字段的值更改选项。我想得到第一个输入字段的值,并通过php查询发送它以获取另一个输入字段中的相关数据。

假设我有三个输入字段。我想得到第一个输入字段的值,并通过php查询将其发送到数据库以获取第二个输入字段的值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

$("#first-dropdown").off("change").on("change", function(){

 $.ajax({
    'url':"getUrl.php",
    'data':{id:$("#first-dropdown").val()},
    'method':'POST',
    'success':function(data){
       $("select#second-dropdown").empty().html(function(){
        var output='<option value="">Choose value</option>';
        if(!$.isEmptyObject(data.options)){
         $.each(data.options, function(key, value) {
           output += '<option value="'+key+'">' + value + '</option>';
         });
        }
        return output;
        });

  })

})

</script>
</head>

<body>

<select id="first-dropdown">
  <option value="volvo">1</option>
  <option value="saab">2</option>
  <option value="mercedes">3</option>
  <option value="audi">4</option>
</select>
<select id="second-dropdown">

</select>
</body>
</html>

我的gerUrl.php是:

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

1 个答案:

答案 0 :(得分:4)

您可以通过以下方式执行此操作,

这是您的第一个下拉列表和第二个

<select id="first-dropdown">
  <option value="volvo">1</option>
  <option value="saab">2</option>
  <option value="mercedes">3</option>
  <option value="audi">4</option>
</select>
<select id="second-dropdown">

</select>

您的JQuery代码

$("#first-dropdown").off("change").on("change", function(){

 $.ajax({
    'url':"getUrl.php",
    'data':{id:$("#first-dropdown").val()},
    'method':'POST',
    'success':function(data){
       $("select#second-dropdown").empty().html(function(){
        var output='<option value="">Choose value</option>';
        if(!$.isEmptyObject(data.options)){
         $.each(data.options, function(key, value) {
           output += '<option value="'+key+'">' + value + '</option>';
         });
        }
        return output;
        });

  })

})

和你的php控制器代码

$id = $_POST['id']
  //search for the value of second dropdown using this id and once you get ths send it back to ajax 
//suppose $dropdownOPtions has all the data you got for second dropdown
  $data['options'] = $dropdownOptions;    

echo json_encode($data);

请告诉我如果您还需要更多信息:)