CODEWITHSUNDEEP
javascriptjquery
egurb
egurb

Reputation: 1216

Find Variable By Select Tag Value

I have a select tag which has some values (a lot actually) where I assigned each option's value to a variable and use "switch" method which selects data I need from JSON. It is working fine actually with the method, however as I mentioned above I have a lot of data and would like to change endless "switch" for the shorter "if/else" statement.

Variables I use for the data are completely same with values taken from the "select" tag, however I could not figure out how to pass the corresponding data variable to function I would like to use.

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

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

Upvotes: 0

Views: 154

Answers (1)

DPac
DPac

Reputation: 515

Option 1 Use array to store var1-var100, and set the value of each option as an index to the array.

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>

Option 2

Use data attribute to store the data inside the option tag

$(".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>

NOTE: $.parseJSON and parseInt might be a redundant call.

Upvotes: 1

Related Questions