選択した値が正しく表示されます

Question

私はAJAXを使用してカテゴリを表示しています。私の問題はカテゴリを選択したときにドロップダウンが常にこの最初の位置に戻ってくるときです。

たとえば、「Panneaux lumineux」をクリックすると、プルダウンが自動的に「あなたのカテゴリを選択」に戻ります。この場合、「Panneaux lumineux」は選択されません。

Tkの

<div class="col-md-5"> 
    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $("#myAjax").on('click', function() { 
     $.ajax({ 
      url: 'http://Admin/products_categories_ajax.php', 
      dataType: 'json', 
      success: function (data) { 
      //data returned from php 
      var options_html = '<option value="">-- Select your categorie --</option>'; 
      for (index in data) { 
       var category_id = data[index]['id']; 
       var category_name = data[index]['text']; 
       options_html += '<option value="' + category_id + '">' + category_name + '</option>'; 
      } 
      $('#category_id').html(options_html); 
      } 
     }); 
     }); 
    }) 
    </script> 
    <div id="myAjax"> 
    <select name="move_to_category_id" id="category_id"> 
     <option value="">-- Select your categorie --</option> 
     <option value="0">Haut</option> 
     <option value="25">Panneaux lumineux</option> 
     <option value="23">Panneaux Signalétique</option> 
     <option value="20">Signalétique Camping</option> 
     <option value="22">&nbsp;&nbsp;&nbsp;Barrières</option> 
     <option value="21">&nbsp;&nbsp;&nbsp;Entrée</option> 
    </select> 
    <input name="current_category_id" value="20" type="hidden" /> 
    </div> 
</div> 

Answer 1

あなたが持っている問題が発生する

for (index in data) { 
    var category_id = data[index]['id']; 
    var category_name = data[index]['text']; 
    options_html += '<option value="' + category_id + '">' + category_name + '</option>'; 
} 

を変更してみてください。たとえドロップダウンが視覚的に同じであっても、DOM内にはありません。

解決するには、選択したカテゴリIDを保存して、ドロップダウンが置き換えられた後に選択する必要があります。

<div class="col-md-5"> 
     <script type="text/javascript"> 
      jQuery(document).ready(function() { 
      $("#myAjax").on('click', function() { 
       var selectedCategory = $('select#category_id').val(); 
       $.ajax({ 
       url: 'http://Admin/products_categories_ajax.php', 
       dataType: 'json', 
       success: function (data) { 
        //data returned from php 
        var options_html = '<option value="">-- Select your categorie --</option>'; 
        for (var index in data) { 
        var category_id = data[index]['id']; 
        var category_name = data[index]['text']; 
        options_html += '<option value="' + category_id + '"' + (category_id == selectedCategory ? ' selected' : '') + '>' + category_name + '</option>'; 
        } 
        $('#category_id').html(options_html); 
       } 

       }); 

      }); 
      }) 
     </script> 
     <div id="myAjax"> 
      <select name="move_to_category_id" id="category_id"> 
       <option value="">-- Select your categorie --</option> 
       <option value="0">Haut</option> 
       <option value="25">Panneaux lumineux</option> 
       <option value="23">Panneaux Signalétique</option> 
       <option value="20">Signalétique Camping</option> 
       <option value="22">&nbsp;&nbsp;&nbsp;Barrières</option> 
       <option value="21">&nbsp;&nbsp;&nbsp;Entrée</option> 
      </select> 
      <input name="current_category_id" value="20" type="hidden"> 
     </div> 
    </div> 

Answer 2

$.ajax関数呼び出し 以上あなたが選択した値を保存するために

var selectedOptionVal = $('#category_id').val(); 

を追加します。

この値を使用して、htmlを再作成するときに正しいオプションを選択します。あなたのドロップダウンリストが新しいものに交換されているため、ドロップダウンをクリックしたときそれでは、

for (var index in data) { 
    var category_id = data[index]['id']; 
    var category_name = data[index]['text']; 
    var selectedString = category_id == selectedOptionVal ? ' selected="selected"' : ''; 
    options_html += '<option value="' + category_id + '"' + selectedString + '>' + category_name + '</option>'; 
    }