Question

我使用AJAX来显示我的类别。我的问题是当我选择一个类别时，下拉列表总是在这个初始位置返回

例如，如果我点击＆＃34; Panneaux lumineux＆＃34;，下拉菜单将返回＆＃34;选择您的类别＆＃34;自动。在这种情况下＆＃34; Panneaux lumineux＆＃34;没有被选中。

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

上面 $.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>';
    }

Answer 2

您遇到的问题，因为当您点击下拉列表时，您的下拉列表会被替换为新的下拉列表。即使下拉列表在视觉上是相同的，它也不在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>

正确显示所选值

2 个答案: