Question

我有一个表单，用户可以从100个问题列表中选择一个特定问题。更新<Select id="problem">字段后，将通过AJAX启动以下MySQL查询。

if(isset($_POST['action']) && ($_POST['action']=='problem_lookup')) {

    if(isset($_POST['problem'])) {

        // Start MySQLi connection
        include 'connect_db.php';
        $db = new mysqli($dbhost,$dbuser,$dbpass,$dbname);

        // display error if connection cannot be established
        if($db->connect_errno > 0){
        die('Unable to connect to database [' . $db->connect_error . ']'); }

        // run query
        $sql = "SELECT Category, Department_Responsible, Alert, Experience FROM qci_problems_index_new WHERE Issue='".$_POST['problem']."' GROUP BY Issue";
        $result = $db->query($sql) or die(mysqli_error($db));

        // return data as array
        $array = mysqli_fetch_array($result);
        echo json_encode($array);
    }

}

查询返回多个值，每个值都填充到表单中的单个<select>字段中，唯一的例外是<select id="alert-dept" multiple>字段，该字段可以包含多个值，而且问题出在哪里

现在，除了alert-dept之外的所有字段都按预期填充了一个特定值，但是如果查询返回2个或更多值，则该字段保持为空。我想通过AJAX填充字段时我必须使用foreach()等效的JavaScript，但是由于我不知道该怎么做而丢失了。

这里是我用来用查询结果填充表单字段的代码。

<script type="text/javascript" language="javascript">                                                 
$(function () {
    $('#problem').change(function () {                      // on change in field "problem"

        $.ajax({                                            // launch AJAX connection
            type: 'POST',                                   // via protocol POST
            url: '../../plugins/MySQL/ajax_action.php',
            data: { action: 'problem_lookup' , problem: $("#problem").val() },
            dataType: 'json',                               // encode with JSON
            success: function (data)
            {
                var data0 = data[0];                            // assign row[0] result to variable = Problem Category
                var data1 = data[1];                            // assign row[1] result to variable = Dept Responsible
                var data2 = data[2];                            // assign row[2] result to variable = Alert
                var data3 = data[3];                            // assign row[3] result to variable = Experience

                $('#problem_category').val(data0);              // insert result into field
                $('#department').val(data1);                    // insert result into field
                $('#alert_dept').val(data2);
                $('#experience').val(data3);

                $('#problem_category').trigger('change');       // refresh select field via trigger('change') to show the result
                $('#department').trigger('change'); 
                $('#alert_dept').trigger('change'); 
                $('#experience').trigger('change'); 
            },
        });
    });

});

Answer 1

为了根据Ajax结果在您的选择中定位右option ...

而不是：

$('#alert_dept').val(data2);

尝试：

// Deselect all options just in case.
$('#alert_dept option').attr("selected",false);

data2.split(',').forEach(function(item) {

  // Select the options that match the ajax result.
  $('#alert_dept').find("option[value='"+item.trim()+"']").attr("selected",true);

});

AJAX - 选择具有多个值的字段填充

1 个答案: