2016-05-17 32 views
1

これは私が解決できない単純な問題です。言うまでもなく、私はjavascriptを初めて使っています。新しく選択したhtmlオプションを最初に選択する方法は?

私は選択された値を持つ最初のオプションを除いて、アルファベット順にドロップダウンリストをソートしました。ユーザーが別の値を選択したとき、その選択肢を最初のオプションに、残りをアルファベット順にしたいと思います。

これを行うにはjavascriptでソートする必要がありますか、「リストの先頭に追加する」機能はありますか?

sort in htmlはソートのためのtwigです。私は...私はこれは間違いなくあなたの必要性を解決することを願っています

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 

答えて

2

..

<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>
をjsの関数を使用していませんよ

+0

はい、これは正しかったです。ユーザーがオプションを選択した後にページロード時にそのオプションを最初に(または、<オプションが選択されています)選択するようにしたかったのです。 – user6104636

+0

だから、あなたが頼んでいるのは、オプションが選択された後、ユーザーがページをリロードした場合、そのオプションを最初にしたい –

関連する問題