时间戳

首页 > 解决方案 > 脚本没有保留属性

javascript - 脚本没有保留属性

问题描述

搜索工作正常，问题是当我们搜索某些东西时，它会显示相应的option但它会删除value属性，当它删除搜索字段时它会返回所有不带value.

我该如何解决这个问题，以便将value属性保留在 中select > option？

jQuery(function() {
  var opts = jQuery('#list option').map(function() {
    return [[jQuery(this).text()]];
  });

  jQuery('#findItem').keyup(function() {
    var rxp = new RegExp(jQuery('#findItem').val(), 'i');
    var optlist = jQuery('#list').empty();

    opts.each(function() {
      if (rxp.test(this[0])) {
        optlist.append(jQuery('<option/>').text(this[0]));
      }
    });
  });
});
select,
input {
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select multiple="multiple" id="list" size="10">
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Orange</option>
  <option value="4">Kiwi</option>
</select><br>
<input type="text" id="findItem">

标签： javascriptjquery

解决方案

检查返回opts，它将返回一个包含文本和选项值的数组。
return [[jQuery(this).text(), jQuery(this).val()]];

因此，您可以在此处附加值optlist.append(jQuery('<option/>').text(this[0]).val(this[1])); 

jQuery(function() {
  var opts = jQuery('#list option').map(function() {
    return [[jQuery(this).text(), jQuery(this).val()]];
  });

  jQuery('#findItem').keyup(function() {
    var rxp = new RegExp(jQuery('#findItem').val(), 'i');
    var optlist = jQuery('#list').empty();

    opts.each(function() {
    console.log(this)
      if (rxp.test(this[0])) {
        optlist.append(jQuery('<option/>').text(this[0]).val(this[1]));
      }
    });
  });
});
select,
input {
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select multiple="multiple" id="list" size="10">
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Orange</option>
  <option value="4">Kiwi</option>
</select><br>
<input type="text" id="findItem">

推荐阅读