Question

我的网页有两个<select>框：Hadoop Distribution和Hadoop Version。我还有Distribution和Version之间的地图：

function hadoop_map() {
      var hash = Object();
      // replace this part of the code by a jQuery post 
      hash['Cloudera'] = ['4', '5'];
      hash['Apache'] = ['2.4', '2.3.0', '2.2.0', '2.1.1', '2.1.0', '2.0.6', '1.2.1'];
      hash['Hortonworks'] = ['2.1', '2.0', '1.3'];
      hash['Pivotal'] = [];
      hash['MapR'] = [];

      return hash;
   }

所以，一个选择是：

<select id="hadoop_dist">
    <option>Cloudera</option>
    <option>Hortonworks</option>
    <option>Apache</option>
    <option>MapR</option
    <option>Pivotal</option>
</select>

而另一个是

<select id="hadoop_version">
   <option>4</option>
   <option>5</option>
   <option>2.3.0</option>
    ...
 </select>

因此，当我在顶部框中选择Cloudera时，我只想显示hadoop_map中列出的条目（即4和5） hadoop_version？如何使用jQuery完成该操作？

Answer 1

由于数据的性质，一种方便的方法是每次更改时构建它。与其他选项相比，效率稍低但可读性和易扩展性：

var hadoopMap = hadoop_map();

$('#hadoop_dist').change(function() {
    var selectedOption = $(this).val();
    var $options = $.map(hadoopMap[selectedOption], function(value) {
        return $('<option>').html(value);
    });

    $('#hadoop_version').empty().append($options);
});

Answer 2

使用

.find('option').remove()

然后循环遍历所选has属性的数组并使用

.append('<option>' + item + '</option').

有关工作示例，请参阅此jsfiddle

使用jQuery将过滤器应用于选择框

2 个答案: