Question

我用下面的代码发出查询结果;

io.on('connection', function(socket) {
          socket.on('socketfabrika', function(fabrika) {
            console.log();
            console.log("**********************************");
            console.log("Selected Fabrika: " + fabrika);
            console.log("**********************************");
            console.log();

            connection.query("SELECT kumes FROM report WHERE fabrika = ? GROUP BY kumes DESC ", fabrika, function(err, rows) {
              if (err) console.log(err);
              else {
                for (var i = 0; i < rows.length; i++) {
                  var row = rows[i];
                  console.log("**********************************");
                  console.log("Possible kumes: " + row.kumes);
                  console.log("**********************************");

                  io.emit("sel_kumes", row.kumes);
                }
              }
            });
          });
        });

然后，在客户端，我正在尝试在选择框中显示查询结果，

<form id="form_kumes">
    <select  multiple>
      <option id="sel_kumes"></option>
    </select>
</form>

但是当我向选择框发出数据时，它总是在选择框中并排添加新值，

<script type="text/javascript">  
 socket.on('sel_kumes', function(rows) {
      console.log(rows);
 $('#sel_kumes').append($('<option></option>').text(rows));
});
</script>

因为这条线;

$('#sel_kumes').append($('<option></option>').text(rows));

如果我将脚本更改为;

<script type="text/javascript">  
 socket.on('sel_kumes', function(rows) {
      console.log(rows);
 $('#sel_kumes').text(rows);
});
</script>

然后，选择框只显示一个结果。

如何显示从服务器获取的所有结果（问题的第1部分），然后刷新选择框如果发出新值？（问题的第2部分< / EM>）

Answer 1

io.emit被称为循环运行的次数相同，因此发射和接收没有问题。

您所做的错误是每次都将文字附加到同一选项。因此，并排显示所有文本。

要在客户端显示多个选项，也应该有多个选项。你所做的就是与此相反。

将html更改为：

<form id="form_kumes">
   <select  multiple id="sel_kumes">
   </select>
</form>

现在创建多个选项，与收到响应的次数相同。

socket.on('sel_kumes', function(rows) {
      console.log(rows);
      var sel = document.getElementById('sel_kumes');
      var opt = document.createElement('option');
      opt.id = //give whatever id you have to give to options but make sure 
               //every options should have unique id
      opt.innerHTML = rows;

      //now append to sel div
      sel.appendChild(opt);

});

您可以使用jquery语法代替javascript。

编辑：回答您的第二个问题

有许多方法可以做到这一点，而不是删除旧的选择DOM创建一个新的并从头开始创建选项。另外，为了防止重复发送值，您可以使用数组发出一次。

在服务器端：

var array = [];
for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    console.log("**********************************");
    console.log("Possible kumes: " + row.kumes);
    console.log("**********************************");

    array.push(row.kumes);          
 }
 io.emit("sel_kumes", array);

在客户端：

socket.on('sel_kumes', function(array) {
      console.log(rows);
      var formm = document.getElementById('form_kumes');

      $("#sel_kumes").remove(); //removing element select

      var sel = document.createElement('select');
      sel.id = "sel_kumes";

      for(var i=0;i<array.length;i++){
          var opt = document.createElement('option');
          opt.innerHTML = array[i];

          //now append to sel div
          sel.appendChild(opt);
      }

      //finally append to parent form
      formm.appendChild(sel);
});

在选择框中显示Socket.io结果

1 个答案: