正确显示选定的值

我使用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>

来源

2017-10-01 yokogeri

我不确定是什么问题。我一直在尝试在jsbin https://jsbin.com/juvorazinu/edit?html,output 中重现您的代码，并且我可以正确选择'Panneaux lumineux'，例如 – Rose

你有问题发生，因为你的下拉列表中被替换为一个新的，当你单击下拉。即使下拉菜单在视觉上相同，它也不在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>

来源

2017-10-01 01:53:58 wigi

尝试过但不会工作我总是第相同的结果 – yokogeri

在这种情况下，我们将需要更多信息。你有控制台错误吗？下拉是否完全一样？类别ID是否相同？ – wigi

这是正确的，它的工作，我犯了一个错误， – yokogeri

以上的 $.ajax函数调用添加

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

救你选择的值。

然后使用该值在重新创建html时选择正确的选项。因此，然后尝试改变

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>'; 
}

到

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>'; 
    }

来源

2017-10-01 01:45:38

正确显示选定的值

回答

相关问题