Is there is any way to get the style.color value of an option from inside an HTML select element in this form or is there is any way to get the properties of a specific child from inside that select element

note that:

when I change the option element id to class the website stops working

let continentsSelect = document.getElementById("continent");
let countriesSelect = document.getElementById("country");
let continentColor = document.getElementById("continent-color");

continentsSelect.style.color = continentColor.style.color

<select name="continent" id="continent">
  <option id="continent-color" value="none" style="color: yellow;">اختر قارة</option>
  <option id="continent-color" value="africa" style="color: green;">افريقيا</option>
  <option id="continent-color" value="asia" style="color: green;">اسيا</option>
  <option id="continent-color" value="europe" style="color: green;">اوربا</option>
  <option id="continent-color" value="northAmirca" style="color: green;">امريكا الشمالية</option>
  <option id="continent-color" value="southAmirca" style="color: green;">امريكا الجنوبية</option>
  <option id="continent-color" value="oceania" style="color: green;">الاوقيانوسية</option>
</select>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Do you mean this?

IDs must be unique and we do not style options or give them IDs

const changeColor = (sel) => {
  sel.className = "";
  sel.classList.add(sel.value);
};
let continentsSelect = document.getElementById("continent");
continentsSelect.addEventListener("change",function() { changeColor(this)})
changeColor(continentsSelect)

.none { color: yellow }
.africa { color: green; }
.asia { color: red; }
.europe{ color: blue; }
.northAmerica { color: purple; }
.southAmerica { color: teal; }
.oceania{ color: orange; }

<select name="continent" id="continent" class="none">
  <option value="none">اختر قارة</option>
  <option value="africa">افريقيا</option>
  <option value="asia">اسيا</option>
  <option value="europe">اوربا</option>
  <option value="northAmerica">امريكا الشمالية</option>
  <option value="southAmerica">امريكا الجنوبية</option>
  <option value="oceania">الاوقيانوسية</option>
</select>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

First of all, I'd recommend having unique IDs for each of the child nodes. Then, you can use this unique ID to get the colour.

Or, the better way is to assign a class name to each of this options. So the code would look this way.

<select onclick="run()" name="continent" id="continent">
                <option class="continent-color" value="none"style="color: yellow;">اختر قارة</option>
                <option class="continent-color" value="africa" style="color: green;">افريقيا</option>
                <option class="continent-color" value="asia"   style="color: green;">اسيا</option>
                <option class="continent-color" value="europe" style="color: green;">اوربا</option>
                <option class="continent-color" value="northAmirca" style="color: green;">امريكا الشمالية</option>
                <option class="continent-color" value="southAmirca" style="color: green;">امريكا الجنوبية</option>
                <option class="continent-color" value="oceania" style="color: green;">الاوقيانوسية</option>
            </select>

Note that each of the option tags contains a class instead of an ID. Now to get a specific option, you could do this -

const options = document.getElementsByClassName('continent-color')
const option1 = options[0]; // Returns the first of the option tags
const option1Color = options1.style.color;

You can change the index - in this case (0) has been used to get different nodes.