主页 / 问题 / 868151
Accepted
zoinx2012
Asked:2020-08-13 22:19:54 +0000 UTC2020-08-13 22:19:54 +0000 UTC

Jquery如何在生成的列表中选择活动选项元素

  • 772

我遇到了一个问题，如果选项列表以某种方式更改，则 selected 不起作用。我的代码示例：

<select>
  <option selected data-group="first" value="test1">test1</option>
  <option data-group="first" value="test2">test2</option>
  <option data-group="second" value="test3">test3</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        var groups = {};

        //собираем элементы по группам
        $('option[data-group]').each(function(i, el) {
          var group = $(el).data('group');
          if (!groups.hasOwnProperty(group)) groups[group] = [];
          groups[group].push(el);
        });

        //оборачиваем в новый тег
        for (var group in groups) {
          $(groups[group]).wrapAll('<optgroup label="' + group + '"/>');
        }

    });
</script>

此代码将选项分成组，一切正常，但是！出于某种原因，selected 同时变得疯狂。并且是随机选择的，虽然查看源码时，被选择的元素注册在一个元素上，实际上是在另一个元素上选择的。为什么会发生这种情况？

javascript

2 个回答

  1. 似乎一切正常，如果您不考虑控制台发誓的事实，那么$('option[selected=*]').attr('selected', 'selected').parent().focus();
    值得忘记这样的自行车.attr('selected', 'selected')等，因为它是.prop()（JQuery 中 attr() 和 prop() 之间的区别？ )

    $(document).ready(function() {

  var groups = {};

  //собираем элементы по группам
  $('option[data-group]').each(function(i, el) {
    var group = $(el).data('group');
    if (!groups.hasOwnProperty(group)) groups[group] = [];
    groups[group].push(el);
  });

  //оборачиваем в новый тег
  for (var group in groups) {
    $(groups[group]).wrapAll('<optgroup label="' + group + '"/>');
  }

  $('select option').each(function(){
    if($(this).prop('selected'))
    $(this).focus();
  });

});

$('select').bind('change',function(){
  //$(this).prop('selected');
  var res = $(this).val();
  console.info(res);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option selected data-group="first" value="test1">test1</option>
  <option data-group="first" value="test2">test2</option>
  <option data-group="second" value="test3">test3</option>
</select>

    • 0
  2. Best Answer

    我不知道这是 wrapAll() 方法的错误还是功能。当它包装一个选项时，它会丢失选择了哪个选项。也许不是很漂亮，但解决方案：

    let groups = {};
        //собираем элементы по группам
$('option[data-group]').each(function(i, el) {
   let group = $(el).data('group');
   if (!groups.hasOwnProperty(group)) 
      groups[group] = [];
      groups[group].push(el);
   });
  let saveSelected = $("select").val(); //сохарняем значение select
        //оборачиваем в новый тег
 for (let group in groups) {
  $(groups[group]).wrapAll('<optgroup label="' + group + '"/>');
}
$("select").val(saveSelected); //устанавливаем старое значение
    <select>
  <option selected  data-group="first" value="test1">test1</option>
  <option data-group="first" value="test2">test2</option>
  <option  data-group="second" value="test3">test3</option>
</select>

    • 0

相关问题