I'm trying to change the selected value of a select html element that was created using the js function createElement(), but for some reason the selected index stays the same even if i change it. Here's the code:

            let vendor_cell = document.createElement("td");
            let vendor_dropdown = document.createElement("select");
            vendor_dropdown.setAttribute("id", "selectID" );

            for (let vendorID in vendors) { //generates options using vendors array.
                let option = document.createElement("option");
                option.value = vendorID;
                option.text = vendors[vendorID];
                vendor_dropdown.add(option);

            }
            document.getElementById("selectID").selectedIndex = "3";

            vendor_cell.appendChild(vendor_dropdown)
            row.appendChild(vendor_cell);

I've noticed that the id im assigning isn't showing up when I inspect the page on my browser.

CodePudding user response：

Wil you try that ?

const 
  row             = document.querySelector('table tr')
, vendor_dropdown = row.insertCell().appendChild( document.createElement('select') )
  ;
var vendors = 
  { '1': 'Acer'
  , '2': 'HP'
  , '3': 'MARCONI INSTR'
  , '4': 'ALESSI IND'     // --> index value is 3
  } 

Object.entries(vendors).forEach(([key,val], i) =>
  { 
  vendor_dropdown.add(new Option(val,key,(i===3),(i===3)))
  })

<table>
  <tr>
  </tr>
</table>

CodePudding user response：

Problem

The major problem I found was the following:

for (let vendorID in vendors) { 
  option.value = vendorID;
  option.text = vendors[vendorID];
//...

The use of for...in infers that:

• vendors is an object?
• vendorID is a nested object?

Regardless, I believe the following statement snafus everything being that if vendorID is an object making it an impossible value for the .value property of <option>:

option.value = vendorID;

If an example of the input data was posted I can derive a solid solution.

Details are commented in example

/*
It's not very clear as to what type of data you are using.
This is an object with nested objects. It's horrible for
iteration (iterating is 80% of our code). If this isn't
the data type let me know.
*/
const vendors = {
  "0":{"id":"68084-610","name":"Brainlounge"},
  "1":{"id":"52125-271","name":"Midel"},
  "2":{"id":"49349-907","name":"Cogilith"},
  "3":{"id":"52959-187","name":"Voolia"},
  "4":{"id":"36987-3319","name":"Thoughtstorm"},
  "5":{"id":"54569-3302","name":"Innojam"}
};
// Get an array of vendors values and flatten 1 array
let data = Object.values(vendors).flat();
console.log(data)
// Added a <form> but it's not needed
const form = document.forms[0];
// Reference all form controls
const IO = form.elements;
// Find the first row of the <table>
const row = document.querySelector('table').rows[0];
// Create <td> and <select>
let cell = document.createElement("td");
let dropdown = document.createElement("select");
/*
iterate through data array
- Create a <option>
  - add id from array to .value
  - add name from array to .text
  -add <option> to <select>
*/
for (let vendor of data) {
  let option = document.createElement("option");
  option.value = vendor.id;
  option.text = vendor.name;
  dropdown.append(option);
}

// Add <select> to <td>, add <td> to <tr>
cell.append(dropdown);
row.append(cell);
// Assign [name] to <select>
dropdown.name = 'vendorList';
// Referencing <select> by forms and .elements properties
IO.vendorList.selectedIndex = '3';

table,
td {
  border: 2px ridge grey
}

<form>
  <table>
    <tbody>
      <tr>

      </tr>
    </tbody>
  </table>
</form>