jQuery 在每个事件后循环追加结果

Question

我将 jQuery 中的每个循环应用到 onchange() 事件。

        $(function() {
         $('#datatype').change(function(){
            $.getJSON('/background_process', {
            }, function(data) {
        var toAppend = '';
       $.each(data.result,function(i,o){
       toAppend += '<option >'+o+'</option>';
      });
               $("#result").append(toAppend);
            });
            return false;
          });
        });

<select name="datatype" id='datatype'>
        <option selected disabled >SELECT DATATYPE</option>
        <option value="RAW">RAW</option>
        <option value="DEPTH">DEPTH</option>
</select>
<select id=result name="result">
       <option value="NULL">SELECT TOKEN</option>
</select>

所以我的问题是当我 select option("RAW") 它 return 结果作为选项值然后我 select "DEPTH" 选项并添加 "RAW"和“DEPTH”return 结果并将这两个数据作为选项提供。

输出 - 当我 select "RAW"

<option>"raw-result"<option>
<option>"raw-result"<option>

当我select“深度”时

<option>"raw-data"<option>
<option>"raw-data"<option>
<option>"depth-data"<option>
<option>"depth-data"<option>

所以我想，当我 select 选项时，它 return 循环数据，当再次选择 select 选项时，它 return 新循环数据不附加数据与以前的 select.

输出应该是这样的—— 当我在“RAW”选项之后 select“DEPTH”选项时，它 return

<option>"depth-data"<option>
<option>"depth-data"<option>

但它不会 return 结果。

Answer 1

您正在附加新数据而不是用它替换旧数据。而不是 append 使用 html

$("#result").html(toAppend);

jQuery 在每个事件后循环追加结果

jQuery loop append result after every event

html

javascript

jquery

jquery-events