How can I get an object based on what option(s) has/have been selected?

Question

Got the code here:

var i4options = {
  TTXT1: [
  {val: "01", id: "(01) XT1 Option 1"},
  {val: "02", id: "(02) XT1 Option 2"}
  ],
  TTXT2: [
  {val: "01", id: "(01) XT2 Option 1"},
  {val: "02", id: "(02) XT2 Option 2"}
  ]
};

function i4check() {
  const i1checkval = i1.options[i1.selectedIndex].value;
  const i2checkval = i2.options[i2.selectedIndex].value;
  const i3checkval = i3.options[i3.selectedIndex].value;
  const i4checkoutput1 = "i4options" + i1checkval + i2checkval + i3checkval;

  let userSettings = {
    'product': i1checkval,
    'type': i2checkval,
    'source': i3checkval,
  };

  if (userSettings.product !== '---' && userSettings.type !== '---' && userSettings.source !== '---') {
    let newItem = document.createElement('option');

    var nofentries = i4options.(i1checkval + i2checkval + i3checkval).length;
    var x = 0;
    while (x < nofentries){
      i4.appendChild(new Option(i4options.(i1checkval + i2checkval + i3checkval)[x].id, i4options.(i1checkval + i2checkval + i3checkval)[x].val));
      x += 1;
    }
  
  }
}

function generatordropdown(){
  var o1 = i1.options[i1.selectedIndex].value;
  var o2 = i2.options[i2.selectedIndex].value;
  var o3 = i3.options[i3.selectedIndex].value;
  var o4 = i4.options[i4.selectedIndex].value;
 
  var output = o1 + o2 + o3 + o4;
 
  document.getElementById("output").value = output;
}

<form action="database/additem.php" method="post">

<h1>product</h1>
<select id="i1" onchange="generatordropdown(); i4check();" name="product">
  <option selected="true" disabled="disabled">---</option>
  <option value="T">(T) Telephone</option>
</select><br>

<h1>type</h1>
<select id="i2" onchange="generatordropdown(); i4check();" name="type">
  <option selected="true" disabled="disabled">---</option>
  <option value="T">(T) Model T</option>
</select><br>

<h1>source</h1>
<select id="i3" onchange="generatordropdown(); i4check();" name="source">
  <option selected="true" disabled="disabled">---</option>
  <option value="XT1">(XT1) XT1</option>
  <option value="XT2">(XT2) XT2</option>
</select><br>

<h1>i4</h1>
<select id="i4" onchange="generatordropdown()" name="category">
  <option selected="true" disabled="disabled">---</option>
</select><br>

<h1>ID</h1>
<input onClick="this.setSelectionRange(0, this.value.length)" type="text" id="output" name="id" style="width: 50%;" readonly><br>

</form>

Or if you prefer jsfiddle: https://jsfiddle.net/2kd6LdLc/

On line 27 and 30 it says:

(i1checkval + i2checkval + i3checkval)

What I'm trying to do here is have the code check TTXT1 if option i3 is XT1, and check TTXT2 if option i3 is XT2. I could do this with if statements but I want to easily add new objects if I have to, so I dont want to have to add an if statement every time. Any suggestions on how to do this? I'm fine with using eval() if it's the only way but I don't know how I would go about using it.

I think you might be looking for something more or less equivalent to [`lodash.get`](https://lodash.com/docs/4.17.4#get) — smac89, Oct 25 '17 at 15:11

score 2 · Accepted Answer · answered Oct 25 '17 at 15:33

2

You just need to use square brackets to index an object by property name:

var entries = i4options[i1checkval + i2checkval + i3checkval];
var nofentries = entries.length;
var x = 0;
while (x < nofentries){
  i4.appendChild(new Option(entries[x].id, entries[x].val));
  x += 1;
}

answered Oct 25 '17 at 15:33

JLRishe

95,368
17
122
158

Thanks for that. Is there also a way to make i4 options clear if i1,2 or 3 are changed? If i change i3 now it adds the other set of options to the end of the list too – finlx Oct 25 '17 at 15:44
1

@finlx You can use `while(i4.children[1]) { i4.removeChild(i4.children[1]); }` to clear all options other than the `---`. – JLRishe Oct 25 '17 at 15:57
cheers, just in case you're interested i found that adding document.getElementById('i4').innerText = null; just under the if statement works too – finlx Oct 25 '17 at 16:04
@finlx That would clear out the options, but wouldn't it also wipe out the `---` option too? – JLRishe Oct 25 '17 at 16:07
Yeah you're right, means every time a new options list is generated I have to put: i5.appendChild(new Option("---")); document.getElementById("i5").options[0].disabled = true; to add it back. Your way is simpler, thanks for your help! – finlx Oct 25 '17 at 17:38

How can I get an object based on what option(s) has/have been selected?

1 Answers1