Question

我有一个select标签，它有一些值（实际上很多）我将每个选项的值分配给一个变量并使用＆＃34; switch＆＃34;从JSON中选择我需要的数据的方法。它实际上与该方法一起正常工作，但正如我上面提到的，我有很多数据，并希望改变无穷无尽的＆＃34;切换＆＃34;对于较短的＆＃34; if / else＆＃34;声明。

我用于数据的变量与从＆＃34; select＆＃34;中取得的值完全相同。标签，但我无法弄清楚如何将相应的数据变量传递给我想要使用的函数。

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 使用array存储var1-var100，并将每个选项的值设置为数组的索引。

＆＃13;

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])
});

＆＃13;

<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>

＆＃13;

选项2

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

中

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意：$.parseJSON和parseInt可能是冗余呼叫。

通过选择标记值查找变量

1 个答案: