Question

我有以下代码根据选择的其他下拉框填充下拉框：

ps4models = new Array("Select My Model", "PS4 (Release Model)", "PS4 Slim", "PS4 Pro");
xboxonemodels = new Array("Select My Model", "Xbox One (Release Model)", "Xbox One Slim", "Xbox One Scorpio");

populateSelect();

$(function() {
  $('#console').change(function() {
    populateSelect();
  });
});

function populateSelect() {
  console = $('#console').val();
  $('#model').html('');

  if (console == 'ps4') {
    ps4models.forEach(function(t) {
      $('#model').append('<option>' + t + '</option>');
    });
  }

  if (console == 'xboxone') {
    xboxonemodels.forEach(function(t) {
      $('#model').append('<option>' + t + '</option>');
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="console">
  <option value="selectconsole">Select My Console</option>
  <option value="ps4">PS4</option>
  <option value="xboxone">Xbox One</option>
</select>
<select id="model"></select>

这会填充第二个下拉框，但它会在不添加“value”参数的情况下执行此操作。我如何调整代码以使用每个选项创建“值”参数？

Answer 1

而不是：

$('#model').append('<option>' + t + '</option>');

执行：

$('#model').append($('<option>').val(t).text(t));

注意：这更像是附加选项的jQuery方式，并会自动转义"和&等特殊字符。

Answer 2

我觉得我错过了一些东西，但是为了附加带有值的选项，你可以像使用值一样追加选项，就像你在HTML代码段中所做的那样：

      $('#model').append('<option value="' + t + '">' + t + '</option>');

Answer 3

在普通的JavaScript中，您可以像这样创建一个Option元素：

var modelSelect = document.getElementById('model');
var selectOption = document.createElement('option');

selectOption.text = 'Select My Model';
selectOption.value = 'Select My Model';

modelSelect.add(selectOption);

您可以创建一个jQuery插件来处理为您填充的下拉菜单。您需要做的就是传递数据。它可以是数组或对象。

如果数组中的每个项目都是对象，也可以指定键和文本字段。

此外，您应该创建一个数据对象并按键访问不同的值。这将允许您轻松地循环数据。

(function($) {
  $.fn.populateDropdown = function(data, removePrevious, value, text) {
    text = text || value;
    if (removePrevious === true) {
      this.find('option').remove();
    }
    if ($.isArray(data)) {
      this.append(data.map(function(item) {
        let value = $.isPlainObject(item) ? item[value] : item;
        let text = $.isPlainObject(item) ? item[text] : item;
        return $('<option>').val(value).text(text);
      }));
    } else {
      this.append(Object.keys(data).map(function(key) {
        return $('<option>').val(key).text(data[key][value]);
      }));
    }
    return this;
  }
})(jQuery)

var viewData = {
  ps4models: {
    text: 'PS4',
    value: ["Select My Model", "PS4 (Release Model)", "PS4 Slim", "PS4 Pro"]
  },
  xboxonemodels: {
    text: 'Xbox One',
    value: ["Select My Model", "Xbox One (Release Model)", "Xbox One Slim", "Xbox One Scorpio"]
  }
};

$('#console')
  .append($('<option>').val('selectconsole').text('Select My Console'))
  .populateDropdown(viewData, false, 'text');

$(function() {
  $('#console').change(function(e) {
    $('#model').populateDropdown(viewData[e.target.value]['value'], true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="console"></select>
<select id="model"></select>

如何使用“value”参数为每个选项填充下拉框？

3 个答案: