0

I have a xslt file with dynamical filled drop-down-menu. I need to read the dynmical filled drop-down-menu with JavaScript and compare it with a defined value by myself. For example my defined value is Friday. My drop-down-menu is filled with all days of a week and if "Friday" is in my drop-down-menu I would like to do something. So the question is just how can I go through the drop-down-menu and compare each entry with my defined value?

This is a part of my xslt file for the drop-down-menu:

            <th rowspan="2">plane
                <select id="modelRangeDropdown" onclick="JavaScript_Filter(this)">
                        <option selected="selected">All</option>
                     <xsl:for-each select="logstore/plane">
                        <option>
                            <xsl:value-of select="Name" />
                          </option>
                     </xsl:for-each>                    
                </select>                    
            </th>
Daniel_1111
  • 31
  • 3

2 Answers2

0

You can get an HTMLOptionsCollection and then, using Array.some, loop through checking if the value exists.

const select1 = document.getElementById("select1");
const select2 = document.getElementById("select2");

if (Array.from(select1.options).some(function(option) { return option.innerText == "Friday"; })) {
  console.log("select1 has Friday");
}

if (Array.from(select2.options).some(function(option) { return option.innerText == "Friday"; })) {
  console.log("select2 has Friday");
}
<select id="select1">
  <option>Monday</option>
  <option>Tuesday</option>
  <option>Wednesday</option>
  <option>Thursday</option>
</select>

<select id="select2">
  <option>Monday</option>
  <option>Tuesday</option>
  <option>Wednesday</option>
  <option>Thursday</option>
  <option>Friday</option>
</select>

You could also create an array of the options' text and check if "Friday" is included.

const select1OptionsText = Array.from(document.getElementById("select1").options).map(function(option) { return option.innerText; });
const select2OptionsText = Array.from(document.getElementById("select2").options).map(function(option) { return option.innerText; });

if (select1OptionsText.includes("Friday")) {
  console.log("select1 has Friday");
}

if (select2OptionsText.includes("Friday")) {
  console.log("select2 has Friday");
}
<select id="select1">
  <option>Monday</option>
  <option>Tuesday</option>
  <option>Wednesday</option>
  <option>Thursday</option>
</select>

<select id="select2">
  <option>Monday</option>
  <option>Tuesday</option>
  <option>Wednesday</option>
  <option>Thursday</option>
  <option>Friday</option>
</select>

If you cannot use Array.from() for whatever reason, you can replace it with [].slice.call().

frobinsonj
  • 1,109
  • 9
  • 21
0

I have also found a solution by myself.

I can just go through my drop-down-menu with:

var parameterDropdown = "Friday";
var mySelectNode = document.getElementById("modelRangeDropdown");
var l = mySelectNode.options.length;
    for (var i = 0; i < l; i++) { 
        var opt = mySelectNode[i];

        if (opt === parameterDropdown) {
            // do...
        }
    }
Daniel_1111
  • 31
  • 3