使用jQuery设置整个选择值

Question

我想知道在给定散列作为种子数据的情况下使用jQuery填充select元素的最佳方法。

实施例

var select_options = {
  "option1": ["item1", "item2"],
  "option2": ["item3", "item4"]
};

Using different hash keys to set up the select seed data.

Answer 1

你在找这样的东西吗？但是必须检查某人是否有更好的方法来做到这一点。

＆＃13;

＆＃13;

var select_options = {
  "option1": ["item1", "item2"],
  "option2": ["item3", "item4"]
};

$(function() {

  var selectedOption = "option1";

  $.map(select_options, function(val, key) { //object
    if (key == selectedOption) {
      $.map(val, function(item, index) { //array
        console.log(item + " " + index);
      });
    }
  });

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

比较对象的键或直接访问对象的值和键。这是两个有效的例子。

比较密钥。

＆＃13;

＆＃13;

var select_options = {
  "option1": ["item1", "item2"],
  "option2": ["item3", "item4"]
};

$(function() {
  var selectedOption = "option1";
  createDropdown(selectedOption);
  function createDropdown(selectedOption){
    $('select').html("");
    $.map(select_options, function(val, key) { //object
      if (key == selectedOption) {
        $.map(val, function(item, index) { //array
          $('select').append($("<option>").attr('value',index).text(item));
        });
      }
    });
  }
  
  $('div').on('click', function() {
    createDropdown($(this).attr('data-option'));
  });
  
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-option="option1">click for option1</div>
<div data-option="option2">click for option2</div>
<select>
</select>

＆＃13;

＆＃13;

＆＃13;

使用密钥访问值。

＆＃13;

＆＃13;

var select_options = {
  "option1": ["item1", "item2"],
  "option2": ["item3", "item4"]
};

$(function() {
  var selectedOption = "option1";
  createDropdown(selectedOption);
  function createDropdown(selectedOption){
    $('select').html("");
    var array = select_options[selectedOption];
        $.map(array, function(item, index) { //array
          $('select').append($("<option>").attr('value',index).text(item));
        });
  }
  
  $('div').on('click', function() {
    createDropdown($(this).attr('data-option'));
  });
  
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-option="option1">click for option1</div>
<div data-option="option2">click for option2</div>
<select>
</select>

＆＃13;

＆＃13;

＆＃13;