CODEWITHSUNDEEP
javascriptjquery
Malachi
Malachi

Reputation: 977

jQuery Replace value in select depending on other select box

I have the following array:

var LWTable = [];
LWTable.push([6,200,200,220]);
LWTable.push([8,220,220,240]);
LWTable.push([10,240,240,260]);
LWTable.push([12,260,260,290]);
LWTable.push([15,290,310,340]);
LWTable.push([18,330,360,400]);
LWTable.push([21,385,420,460]);

And the following html:

<select name="plength" id="plength">
  <option value="6" selected>6 in.</option>
  <option value="8">8 in.</option>
  <option value="10">10 in.</option>
  <option value="12">12 in.</option>
  <option value="15">15 in.</option>
  <option value="18">18 in.</option>
  <option value="21">21 in.</option>
</select>
<select name="pwidth" id="pwidth">
  <option value="Width1" selected>Width 1 (xw1x)</option>
  <option value="Width2">Width 2 (xw2x)</option>
  <option value="Width3">Width 3 (xw3x)</option>
</select>

What I want is, that when I select value 8 for plength, that in the pwidth select box, the xw1x, xw2x and xw3x strings are replaced by the values from the MinLoadTable, so that in this example it would show 220, 220 and 240. When I pick 21, it will automatically replace that text with 385,420,460.

Is this possible and if so how? I tried to look up some examples, but didn't get anywhere... Any help or direction would be appreciated!

Upvotes: 0

Views: 177

Answers (2)

Christos
Christos

Reputation: 53958

You could try something like the following:

$(function(){

    var LWTable = [];
    LWTable.push([6,200,200,220]);
    LWTable.push([8,220,220,240]);
    LWTable.push([10,240,240,260]);
    LWTable.push([12,260,260,290]);
    LWTable.push([15,290,310,340]);
    LWTable.push([18,330,360,400]);
    LWTable.push([21,385,420,460]);
  
    $("#plength").change(function(){
        var ele = $(this)
        var length = ele.val();
        var widths = LWTable.find(function(item){
            return item[0] == length;
        });
        if(widths){
            var $pWidth = $("#pwidth");
            $pWidth.empty();
            $.each(widths.slice(1), function(key,value) {
                var txt = 'Width'+(key+1)+' ('+value+')';
                $pWidth.append($("<option></option>")
                       .attr("value", value)
                       .text(txt));
            });
        }
    });
  
   $("#plength").trigger("change");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="plength" id="plength">
  <option value="6" selected>6 in.</option>
  <option value="8">8 in.</option>
  <option value="10">10 in.</option>
  <option value="12">12 in.</option>
  <option value="15">15 in.</option>
  <option value="18">18 in.</option>
  <option value="21">21 in.</option>
</select>
<select name="pwidth" id="pwidth">
  <option value="Width1" selected>Width 1 (xw1x)</option>
  <option value="Width2">Width 2 (xw2x)</option>
  <option value="Width3">Width 3 (xw3x)</option>
</select>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337600

If its possible to change the data structure in the JS code to an object you can make this very striaghtforward. Firstly you can create the plength select options on load from the keys of the object. Then on change of plength you can use the selected value to find the key in the object and populate the options of pwidth. Try this:

var LWTable = {
  '6': [200, 200, 220],
  '8': [220, 220, 240],
  '10': [240, 240, 260],
  '12': [260, 260, 290],
  '15': [290, 310, 340],
  '18': [330, 360, 400],
  '21': [385, 420, 460],
}

var plengthOptions = '';
Object.keys(LWTable).forEach(function(key) {
  plengthOptions += '<option value="' + key + '">' + key + ' in.</option>';
});

$('#plength').append(plengthOptions).change(function() {
  var pwidthOptions = '';
  LWTable[this.value].forEach(function(width, i) {
    pwidthOptions += '<option value="Width' + (i + 1) + '">Width' + (i + 1) + ' (' + width + ')</option>';
  });
  $('#pwidth').html(pwidthOptions);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="plength" id="plength"></select>
<select name="pwidth" id="pwidth"></select>

Upvotes: 1

Related Questions