Question

这是一个我无法解决的简单问题。不用说，我是javascript的新手。

我按字母顺序对下拉列表进行了排序，但第一个选项除外，因为它具有所选值。现在，当用户选择不同的值时，我希望该选择是第一个选项，其余选择按字母顺序排列。

我是否需要在javascript中进行排序才能执行此操作，或者是否有“附加到列表顶部”的功能？

在html中排序是用于排序的树枝。我没有使用js函数......

HTML

<div class = "dropdowns">
    <select id = "dropdown">
        <option selected> name </option>
            {% for key, value in Informations|sort %}
                <option value="{{ key }}"> {{ value }} </option>
            {% endfor %}        
    </select>
</div>

JS

   // Set textfield input to selected dropdown option
    var myTextBox = document.getElementById('Infos');
    var myDropdown = document.getElementById('dropdown');

    document.addEventListener("DOMContentLoaded", function(event) {
        $("select").change().append($("#dropdown"));
        // $("#dropdown").val($("#dropdown option:select").val());
        // myDropdown.value = myTextBox.value
    })

    myDropdown.onchange = function () {
        myTextBox.value = this.value;
    }
    myDropdown.value = myTextBox.value

Answer 1

我希望这肯定会解决你的需求..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(document).on('change','#dropdown',function(){

      $(this).html($('option',this).sort(function(a,b)
                                         {
        if(a.text == b.text)
        {
          return 0;
        }
        if(a.text > b.text)
        {
          return 1;
        }
        else
        {
          return -1;
        }
      }));

      var hold = $('option:selected',this).detach();
      $(this).prepend(hold);
    });
  });
</script>
<body>

  <div class = "dropdowns">
    <select id = "dropdown">
      <option selected> x</option>
      <option>a</option> 
      <option>r</option>   
      <option>d</option>  
      <option>c</option>  
    </select>
  </div>
</body>

如何让新选择的html选项成为首选？

1 个答案: