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

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>

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

如何显示从服务器获得的所有结果（问题的第一部分），然后刷新选择框如果发出新值？（问题的第二部分)

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，而是创建一个新的选择 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);
});