CODEWITHSUNDEEP
javascripthtml
tfs
tfs

Reputation: 53

HTML Options and Values Intechanging

I am currently trying to make a simple web application which logs to the console the values that are selected in an HTML drop-down menu. However, whenever I change my options in a different select, it ends up showing a value in the #player select. For example, if I chose Shot on Cage and clicked save, the console would show that the value to be b. If I am not explaining this thoroughly enough, please let me know, and I will try to re-explain my difficulties. 

function myFunction() {
  var a = document.getElementById("player").selectedIndex;
  console.log(document.getElementsByTagName("option")[a].value);
  var b = document.getElementById("what").selectedIndex;
  console.log(document.getElementsByTagName("option")[b].value);
  var c = document.getElementById("where").selectedIndex;
  console.log(document.getElementsByTagName("option")[c].value);
  var d = document.getElementById("when").selectedIndex;
  console.log(document.getElementsByTagName("option")[d].value);
}
<select id="player">
  <option value="b">B</option>
  <option value="n">N</option>
  <option value="a">A</option>
  <option value="c">C</option>
  <option value="m">M</option>
  <option value="j">J</option>
  <option value="ja">Ja</option>

</select>
<select id="what">
  <option value="shoton">Shot on Cage</option>
  <option value="shotoff">Shot off Cage</option>
  <option value="goal">Goal</option>
  <option value="assist">Assist</option>
  <option value="block">Block</option>
  <option value="steal">Steal</option>
  <option value="turnover">Turnover</option>
  <option value="drawn">Ejection Drawn</option>
  <option value="ejected">Ejected</option>
</select>
<select id="where">
  <option value="set">Set</option>
  <option value="navy">Navy</option>
  <option value="leftwing">1/2 side past 5</option>
  <option value="rightwing">4/5 side past 5</option>
  <option value="point">Point/3</option>
  <option value="lefttwo">1/2 side 2 meter</option>
  <option value="righttwo">4/5 side 2 meter</option>
  <option value="1">6 on 5 1</option>
  <option value="2">6 on 5 2</option>
  <option value="3">6 on 5 3</option>
  <option value="4">6 on 5 4</option>
  <option value="5">6 on 5 5</option>
  <option value="6">6 on 5 6</option>
</select>
<select id="when">
  <option value="q1">Quarter 1</option>
  <option value="q2">Quarter 2</option>
  <option value="q3">Quarter 3</option>
  <option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>

Upvotes: 1

Views: 59

Answers (2)

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This will work for you.

.getElementsByTagName("option") will ruin your result as it will select all the <option> tags and it post the result as one.

So try this code it will work.

function myFunction() {
  var a = document.getElementById("player");
  console.log(a.options[a.selectedIndex].value);
  var b = document.getElementById("what");
  console.log(b.options[b.selectedIndex].value);
  var c = document.getElementById("where");
  console.log(c.options[c.selectedIndex].value);
  var d = document.getElementById("when");
  console.log(d.options[d.selectedIndex].value);
}
<select id="player">
  <option value="b">B</option>
  <option value="n">N</option>
  <option value="a">A</option>
  <option value="c">C</option>
  <option value="m">M</option>
  <option value="j">J</option>
  <option value="ja">Ja</option>

</select>
<select id="what">
  <option value="shoton">Shot on Cage</option>
  <option value="shotoff">Shot off Cage</option>
  <option value="goal">Goal</option>
  <option value="assist">Assist</option>
  <option value="block">Block</option>
  <option value="steal">Steal</option>
  <option value="turnover">Turnover</option>
  <option value="drawn">Ejection Drawn</option>
  <option value="ejected">Ejected</option>
</select>
<select id="where">
  <option value="set">Set</option>
  <option value="navy">Navy</option>
  <option value="leftwing">1/2 side past 5</option>
  <option value="rightwing">4/5 side past 5</option>
  <option value="point">Point/3</option>
  <option value="lefttwo">1/2 side 2 meter</option>
  <option value="righttwo">4/5 side 2 meter</option>
  <option value="1">6 on 5 1</option>
  <option value="2">6 on 5 2</option>
  <option value="3">6 on 5 3</option>
  <option value="4">6 on 5 4</option>
  <option value="5">6 on 5 5</option>
  <option value="6">6 on 5 6</option>
</select>
<select id="when">
  <option value="q1">Quarter 1</option>
  <option value="q2">Quarter 2</option>
  <option value="q3">Quarter 3</option>
  <option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>

options[a.selectedIndex].value this simple will get you the value of the selected option value in the select and in javascript option in a property of select which we can combain with selectedIndex property and get you value.

Hope this was helpfull.

Upvotes: 3

Jaromanda X
Jaromanda X

Reputation: 1

you have many options split into 4 selects ... document.getElementsByTagName will receive them ALL ... so using the selectedIndex is only valid for the fist select

you can use getElementsByTagName on any element - so, in this case you would use it on the select element

    function myFunction() {
      var a = document.getElementById("player");
      console.log(a.getElementsByTagName("option")[a.selectedIndex].value);
      var b = document.getElementById("what");
      console.log(b.getElementsByTagName("option")[b.selectedIndex].value);
      var c = document.getElementById("where");
      console.log(c.getElementsByTagName("option")[c.selectedIndex].value);
      var d = document.getElementById("when");
      console.log(d.getElementsByTagName("option")[d.selectedIndex].value);
    }
<select id="player">
  <option value="b">B</option>
  <option value="n">N</option>
  <option value="a">A</option>
  <option value="c">C</option>
  <option value="m">M</option>
  <option value="j">J</option>
  <option value="ja">Ja</option>

</select>
<select id="what">
  <option value="shoton">Shot on Cage</option>
  <option value="shotoff">Shot off Cage</option>
  <option value="goal">Goal</option>
  <option value="assist">Assist</option>
  <option value="block">Block</option>
  <option value="steal">Steal</option>
  <option value="turnover">Turnover</option>
  <option value="drawn">Ejection Drawn</option>
  <option value="ejected">Ejected</option>
</select>
<select id="where">
  <option value="set">Set</option>
  <option value="navy">Navy</option>
  <option value="leftwing">1/2 side past 5</option>
  <option value="rightwing">4/5 side past 5</option>
  <option value="point">Point/3</option>
  <option value="lefttwo">1/2 side 2 meter</option>
  <option value="righttwo">4/5 side 2 meter</option>
  <option value="1">6 on 5 1</option>
  <option value="2">6 on 5 2</option>
  <option value="3">6 on 5 3</option>
  <option value="4">6 on 5 4</option>
  <option value="5">6 on 5 5</option>
  <option value="6">6 on 5 6</option>
</select>
<select id="when">
  <option value="q1">Quarter 1</option>
  <option value="q2">Quarter 2</option>
  <option value="q3">Quarter 3</option>
  <option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>

That being said, this still isn't the best solution - use @weBBer's code INSTEAD

because a <select> element has a property called options, which you can use the selectedIndex property to get the selected <option> - see the better answer for an example

Upvotes: 1

Related Questions