Question

tbl_fruits

  id   |    name     |
   1   |   banna     |
   2   |   apple     |
   3   |   orange    |
   4   |   kiwi      |

我有我的html脚本..

<form id="form-add_users" autocomplete="off">
 <div class="modal-content">
  <div class="modal-header">
    <h3 class="modal-title" id="myModalLabel3"><i class="i-user-add"></i> Add 
     User</h3> 
  </div>
  <div class="modal-body">
    <div class="col-sm-2 control-label">What is your favorite fruit </div>
   <select class="select2" id="fruits" name="fruits">
    <option value="">Choose one- </option>
   </select>
  </div
 </div>
</form

我想要实现的是将 tbl_fruits 中的数据显示到我的select标记...有没有办法在jquery中执行此操作？...就像我点击用于添加用户的按钮select标签将显示来自db的数据...我想要做的是从select ...动态更改数据...

 $.ajax({
      type: 'POST',
      url:'../ajax/add_user.php',
      dataType:'JSON',
      data:formData,
      cache:false,
      contentType:false,
      processData:false,
      success:function(result){
        if (result) {
          swal("Success!", "User has been added", "success");
          setTimeout(function () {
          $('#modal-add_users').modal('hide');
          }, 2000);
          var rowData = params.reduce(function(obj, item) {
              obj[item.name] = item.value;
              return obj;
          }, {});
              rowData['users_id'] = result;
              datatable.row.add(rowData).draw(); 
        } else {
          swal("Error", "An error occured.!", "error");
          console.log(result);
        } 
      },
      error:function(status){
        console.log(status.responseText);
      }
    });

到目前为止，这是我的ajax代码。

这是我根据答案所做的：

$('#btn-add_procedure').click(function(){
        $.ajax({
            url:'../ajax/gettest.php',
            type:'GET',
            success:function(result){
                for(item in result){
                    $('#fruits').append('<option value='+result[item].name'>'+result[item].name+'</option>');
                }
            },
            error:function(status){
                alert('error');
            }
        });

  $('#modal-add_procedure').modal({backdrop: 'static', keyboard: true});

});

但没有任何作用......我甚至无法打开我的模态.. 的 gettest.php

$data = $test->getTest();
    echo json_encode($data);

这是我要求的查询..

public function getTest()
{
    $sql="SELECT * FROM tbl_test";
    $view = $this->dbh->prepare($sql);
    $view->execute();
    $data = $view->fetchAll(PDO::FETCH_ASSOC);
    return $data;
}

Answer 1

您可以使用以下任何一种方法来实现：

  var optionsList = "";
    for(var i = 0; i < result.length; i++) {
        optionsList += "<option value='" + result[i] + "'>" + result[i] + "</option>";
    }
    $('#fruits').append(optionsList);

OR

var optionsList = "";
$.each( result, function( key, value ) {
  optionsList += "<option value='" + value.Value + "'>" + value.Text + "</option>";
});
}
$('#fruits').append(optionsList);

Answer 2

请检查以下方法

$("#butonID").click(function(e){
          e.preventDefault();
            $.ajax({type: "GET",
                url: "/pages/test",
                success:function(result){
                 for(item in result)
                  $("#mySelect").append('<option value='+result[item].id+'>'+result[item].name+'</option>');
                },
               error:function(result)
                {
                alert('error');
               }
           });
      });
    });

使用jquery在select标签上显示数据库中的数据

2 个答案: