javascript - 通过选择标签值查找变量

Question

我有一个选择标签，它有一些值(实际上很多)，我将每个选项的值分配给一个变量，并使用“switch”方法从 JSON 中选择我需要的数据。实际上，该方法工作得很好，但是正如我上面提到的，我有很多数据，并且想将无休止的“switch”更改为较短的“if/else”语句。

我用于数据的变量与从“select”标记中获取的值完全相同，但是我无法弄清楚如何将相应的数据变量传递给我想要使用的函数。

HTML

<select id="select" class="select-data" name="selector">
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
    <option value="val3">Value 3</option>
    ...
    ...
    ...
    <option value="val100">Value 100</option>
</select>

JQuery

$(document).ready(function(){
    $(".select-data").change(function(){
        var select = $("select[name=selector]").val();
        switch (select) { 
        case 'val1': 
            buildTable(var1);
            break;
        case 'val2': 
            buildTable(var2);
            break;
        case 'val3': 
            buildTable(var3);
            break;
        ...
        ...
        ...     
        case 'val100': 
            buildTable(var100);
            break;
        };
    });
    function buildTable(data){
        $.each(data, function(index, value) {
            $('.value-table').find('.code').eq(index).text(value.product);
        });
    }
    buildTable(val1);
});  

var var1= [
{"product":"prod1"},
{"product":"prod2},
{"product":"prod3"}]; 

var var2= [
{"product":"prod1"},
{"product":"prod2},
{"product":"prod3"}]; 

var var3= [
{"product":"prod1"},
{"product":"prod2},
{"product":"prod3"}]; 

...
...
...

var var100= [
{"product":"prod1"},
{"product":"prod2},
{"product":"prod3"}]; 



/*=================Desired-Function=================

$(".select-data").change(function(){
    var select = $("select[name=selector]").val();
    if(select == select???){
        buildTable(select???);
    }
});

*==================================================/

Answer 1

选项 1 使用数组存储var1-var100，并将每个选项的值作为数组的索引。

var vals = [
  [{
    "product": "prod1"
  }, {
    "product": "prod2"
  }, {
    "product": "prod3"
  }],
  ...
  ...
  ..., [{
    "product": "prod1"
  }, {
    "product": "prod2"
  }, {
    "product": "prod3"
  }]
];

$(".select-data").change(function() {
  var selectedValue = $("select[name=selector]").val();
  buildTable(vals[selectedValue - 1])
});

<select id="select" class="select-data" name="selector">
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
  ... ... ...
  <option value="100">Value 100</option>
</select>

选项 2

使用data属性将数据存储在option标签内

$(".select-data").change(function() {
  var selectedValue = $.parseJSON($("select[name=selector]").data('json-value'));
  buildTable(selectedValue);
});

<select id="select" class="select-data" name="selector">
  <option value="1" data-json-value="[{prod1:'prod1',prod1:'prod1',prod1:'prod1'}]">Value 1</option>
  <option value="2" data-json-value="[{prod1:'prod1',prod1:'prod1',prod1:'prod1'}]">Value 2</option>
  <option value="3" data-json-value="[{prod1:'prod1',prod1:'prod1',prod1:'prod1'}]">Value 3</option>
  ... ... ...
  <option value="100" data-json-value="[{prod1:'prod1',prod1:'prod1',prod1:'prod1'}]">Value 100</option>
</select>

注意:$.parseJSON 和 parseInt 可能是冗余调用。