Question

我有2个多选的下拉框..表单一个我想要给另一个多个选择下拉框充气..任何人都可以帮我这个吗？当我从jQuery或ajax得到结果时，我希望结果显示在第二个数字多选择下拉框...

这是我的ajax ..

function demo1() {
    var emp_id = document.getElementById("employeeName").value;
    alert(emp_id);
    var datastring = "emp_id=" + emp_id;
    //alert (emp_id);



    $.ajax({
        type: "POST",
        url: "search_emp.php",
        data: datastring,
        dataType: "text",
        //async: false,
        success: function (data) {
            //$("#clname").append(data);
            $('#clname').html(data);
            //document.getElementById("clname").innerHTML=data;            
        }
    });
}

这是2个多重投递箱..

 <label>Select Employee </label>
     <select multiple="multiple" class="w300" name="employeeName[]" id="employeeName" >

 <?php $result = $conn->query("SELECT id,first_name,last_name,employee_id FROM employees");
                while ($row = $result->fetch_assoc()){ ?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['id']; ?><?php echo $row['first_name']; ?>
                    <?php echo $row['last_name'] ?></option>

                <?php } ?>
 <!--<?php echo $option;?>-->
<!--<?php echo $option2;?>-->
 </select>
 </br>
 <label>Select Client</label>
 <select multiple="multiple" class="w300" name="clname[]" id="clname">


 <!--<?php echo $c;?>-->
 </select>

Answer 1

.html()会设置DOM元素的innerHTML内容，但您无法在<select>上执行此操作。有两种方法可以解决它：

1）快速＆amp;脏：替换HTML

让search_emp.php也返回<select>的HTML代码，如下所示：

echo '<select multiple="multiple" class="w300" name="clname[]" id="clname">';
while($row = mysqli_fetch_assoc($ress)) {
    echo '<option value="'.$row['gn_id'].'">'.$row['gamename'].'</option>';
}
echo '</select>';

然后您可以使用jQuery.replaceWith()替换整个DOM元素：

$('#clname').replaceWith(data);

2）更好：从JSON构建DOM

您的search_emp.php应该返回JSON，而不是返回HTML代码，而不是

[
    {
        "gn_id": "123",
        "gamename": "superduper client"
    },
    {
        "gn_id": "234",
        "gamename": "another client"
    }
]

您可以通过将客户端数组传递给PHP's json_encode()并添加JSON内容类型标头来轻松完成此操作（请注意，您必须将dataType的{{1}}属性更改为＆＃ 34; json＆＃34;或者你可以使用快捷功能$.ajax：

$.json()

在进行AJAX调用之前，您需要从select中删除所有现有选项。在AJAX调用的success函数中，您可以遍历结果并将它们附加到select：

// identify the content as JSON
header('Content-Type: application/json');

// put your MySQL query here.
// if errors occur, send a HTTP 500 header and return a useful error message as JSON

// collect results in an array
$rows = array();
while($row = mysqli_fetch_assoc($ress)) {
    $rows[] = $row;
}

// return the results as a JSON list
echo json_encode($rows);

jsfiddle

注意：// reset the select options $('#clname').empty(); // make the ajax call $.ajax({ type: "POST", url: "search_emp.php", data: datastring, dataType: "json", success: function (data) { // build the options from the JSON data for (let client of data) { $('#clname').append('<option value="' + client.gn_id + '">' + client.gamename + '</option>'); } }, // optional, but good to have: error handling error: function (data) { alert("An error occurred:\n" + data.error) } });仅适用于现代浏览器（兼容ES2015）。如果您想支持旧浏览器，请执行旧式let client of data循环。或者使用for (len=data.length, i=0; i<len; ++i)（虽然这可能会更慢）

如何在“多个”投递箱中检索ajax数据？

1 个答案: