TechQA.

Can an <option> have multiple names? Fetch data attributes of <option>?

93 views Asked by At

OK, my question is pretty simple. Can an option have 2 names? I need to use the names to get 2 groups,and then 2 sub groups.

So, say I have 2 lists of options. Everything i list one is "X", and everything in list 2 is "C". However, every option is also something else.

List1

<option name="X"name1="Y">
<option name="X"name1="D">
<option name="X"name1="Y">

List2

<option name="C"name1="Y"> <option name="C"name1="D"> <option name="C"name1="Y">

So, is this possible? The first name is needed to figure out the total of the selected option multiplied by a number in an input box. (eg. option value = 3, input = 6, total 18)

The second name is needed to add a percent bonus. (eg. total = 20, enter 150%, new total is 30)

The fist name is so the computer can tell between one list and the other when using getelementsbyname.

FULL CODE---

    <form action="">
      <fieldset>

        <head>
          <script type="text/javascript">
            function myFunction() {

              /*Left flank bonus*/
              var MLef1 = document.getElementById("MeleeL").value;
              var RLef1 = document.getElementById("RangedL").value;
              var ML = MLef1 - 0;
              var RL = RLef1 - 0;
              



              /*Melee total*/
              var MT1 = ML;
              var MT2 = MT1 / 100;
              var MT = MT2 - 0;

              /*Ranged total*/
              var RT1 = RL;
              var RT2 = RT1 / 100;
              var RT = RT2 - 0;


              /*Left flank normal*/
              /*Left flank melee*/
              var x = document.getElementById("Melee").selectedIndex;
              var y = (document.getElementsByTagName("option")[x].value);
              var xy = document.getElementById("LM1").value;


              /*Left flank Ranged*/
              var p = document.getElementById("Ranged").selectedIndex;
              var o = (document.getElementsByName("LR")[p].value);
              var i = document.getElementById("LM1").value;

              /*Ranged*/
              var c1 = o * i;
              var c = c1 - 0;
              var RTz = c - 0;

              /*Melee*/
              var z2 = y * xy;
              var z = z2 - 0;
              var MTz = z - 0;



              /*Zero function*/

              if (MT <= 0) {
                (document.getElementById("result").innerHTML = z);
              } 
else if (MT > 0) {
                (document.getElementById("result").innerHTML = MTz);
}


              
              if (RT <= 0) {
                (document.getElementById("result1").innerHTML = c);
              } else if (RT > 0) {
                (document.getElementById("result1").innerHTML = RTz);



              }
            }
          </script>
          <style>
            #Defense {
              color: red;
              font-family: Impact;
              font-size: 30px;
            }
            #MeleeL {
              border-radius: 5px;
            }
            #RangedL {
              border-radius: 5px;
            }
     
            
            #Melee {
              font-family: Impact;
              color: red;
              border-radius: 5px;
            }
            #Melee1 {
              font-family: Impact;
              color: red;
              border-radius: 5px;
            }
            #Ranged {
              font-family: Impact;
              color: red;
              border-radius: 5px;
            }
          </style>

          <legend align="center" id="Defense">Defense</legend>

          <table>
            
              
            <tr>
              <td>
                <label>X</label>
                <br>
                <label>Y</label>
                <br>

              </td>
              <td>
                <input type="number" id="MeleeL">%
                <br>
                <input type="number" id="RangedL">%
                <br>
        
            </tr>
          </table>

          <select id="Melee">
            <option value="11">Assassin</option>
            <option value="9">Barbarian</option>
            <option value="6">Crossbowman</option>
            <option value="14">XBOW of EG</option>
            <option value="15">XBOW of KG</option>
            <option value="15">Deathly Horror</option>
            <option value="19">Demon Horror</option>
            <option value="16">Demon Slayer</option>
            <option value="15">Heavy XBOW</option>
            <option value="54">Khan Guard</option>
            <option value="18">Knight of EG</option>
            <option value="18">Knight of KG</option>
            <option value="38">Maceman</option>
            <option value="18">Maruder</option>
            <option value="19">Pyromaniac</option>
            <option value="8">Rngd Sail Ripper</option>
            <option value="11">Rngd Swashbuckler</option>
            <option value="20">Rngd Sharktooth warrior</option>
            <option value="22">Rngd Stone Smasher</option>
            <option value="6">Saber Cleaver</option>
            <option value="20">Shadow XBOW</option>
            <option value="15">Shadow Felon</option>
            <option value="4">Shadow Mace</option>
            <option value="11">Shadow Rogue</option>
            <option value="20">Shadow Scoundrel</option>
            <option value="16">Shadow Wretch</option>
            <option value="5">Slingshot</option>
            <option value="5">Swordsman</option>
            <option value="22">Traveling XBOW</option>
            <option value="20">Traveling Knight</option>
            <option value="19">2handed Sword</option>
            <option value="16">Vet XBOW</option>
            <option value="16">Vet Heavy XBOW</option>
            <option value="20">Vet Maceman</option>
            <option value="18">Vet Marauder</option>
            <option value="19">Vet Pyromaniac</option>
            <option value="20">Vet 2Handed Sword</option>
            <option value="9">Armed Citezen</option>
            <option value="53">Archer</option>
            <option value="8">Bowman</option>
            <option value="8">Composite Bowman</option>
            <option value="51">Cultist Bowman</option>
            <option value="135">Cultist Fanatic</option>
            <option value="51">Desert Bowman</option>
            <option value="250">Dragon Claws</option>
            <option value="400">Dragon Fire</option>
            <option value="170">Flame Bearer</option>
            <option value="135">Halberdier</option>
            <option value="150">Lancer</option>
            <option value="51">Longbowman</option>
            <option value="27">Militia</option>
            <option value="64">Scout of KG</option>
            <option value="150">Sential of KG</option>
            <option value="20">Spear Thrower</option>
            <option value="26">Spearman</option>
            <option value="59">Vet Bowman</option>
            <option value="145">Vet Halberdier</option>
            <option value="61">Vet Longbowman</option>
            <option value="142">Vet Spearman</option>
            <option value="54">Bear Bowman</option>
            <option value="139">Bear Warrior</option>
            <option value="135">Boarder</option>
            <option value="51">Cave Hunter</option>
            <option value="135">Cave Smasher</option>
            <option value="40">Direwolf</option>
            <option value="54">Lion Bowman</option>
            <option value="139">Lion Warrior</option>
            <option value="135">Nrsmn with Ax</option>
            <option value="51">Nrsmn with Bow</option>
            <option value="59">Rngd Cultist Bowman</option>
            <option value="144">Rngd Cultist Warrior</option>
            <option value="54">Rngd Desert Bowman</option>
            <option value="48">Rngd Nrsmn Bowman</option>
            <option value="129">Rngd Nrsmn Warrior</option>
            <option value="137">Rngd Saber Warrior</option>
            <option value="135">Saber Warrior</option>
            <option value="135">Shark Tooth Warrior</option>
            <option value="51">Skeleton Bowman</option>
            <option value="135">Skeleton Warrior</option>
            <option value="51">Stone Smasher</option>
            <option value="138">Vet Swordsman</option>
            <option value="50">Wolfhound</option>
          </select>
          <input type="number" style="width:50px" id="LM1">
          <select id="Ranged">
            <option name="LR" value="17">Assassin</option>
            <option name="LR" value="4">Barbarian</option>
            <option name="LR" value="36">Crossbowman</option>
            <option name="LR" value="23">XBOW of EG</option>
            <option name="LR" value="23">XBOW of KG</option>
            <option name="LR" value="24">Deathly Horror</option>
            <option name="LR" value="5">Demon Horror</option>
            <option name="LR" value="5">Demon Slayer</option>
            <option name="LR" value="24">Heavy XBOW</option>
            <option name="LR" value="50">Khan Guard</option>
            <option name="LR" value="5">Knight of EG</option>
            <option name="LR" value="5">Knight of KG</option>
            <option name="LR" value="6">Maceman</option>
            <option name="LR" value="4">Maruder</option>
            <option name="LR" value="4">Pyromaniac</option>
            <option name="LR" value="14">Rngd Sail Ripper</option>
            <option name="LR" value="3">Rngd Swashbuckler</option>
            <option name="LR" value="9">Rngd Sharktooth warrior</option>
            <option name="LR" value="30">Rngd Stone Smasher</option>
            <option name="LR" value="3">Saber Cleaver</option>
            <option name="LR" value="7">Shadow XBOW</option>
            <option name="LR" value="24">Shadow Felon</option>
            <option name="LR" value="23">Shadow Mace</option>
            <option name="LR" value="5">Shadow Rogue</option>
            <option name="LR" value="6">Shadow Scoundrel</option>
            <option name="LR" value="22">Shadow Wretch</option>
            <option name="LR" value="9">Slingshot</option>
            <option name="LR" value="3">Swordsman</option>
            <option name="LR" value="30">Traveling XBOW</option>
            <option name="LR" value="9">Traveling Knight</option>
            <option name="LR" value="5">2handed Sword</option>
            <option name="LR" value="26">Vet XBOW</option>
            <option name="LR" value="26">Vet Heavy XBOW</option>
            <option name="LR" value="6">Vet Maceman</option>
            <option name="LR" value="4">Vet Marauder</option>
            <option name="LR" value="4">Vet Pyromaniac</option>
            <option name="LR" value="6">Vet 2Handed Sword</option>
            <option name="LR" value="9">Armed Citezen</option>
            <option name="LR" value="55">Archer</option>
            <option name="LR" value="24">Bowman</option>
            <option name="LR" value="159">Composite Bowman</option>
            <option name="LR" value="125">Cultist Bowman</option>
            <option name="LR" value="45">Cultist Fanatic</option>
            <option name="LR" value="125">Desert Bowman</option>
            <option name="LR" value="180">Dragon Claws</option>
            <option name="LR" value="470">Dragon Fire</option>
            <option name="LR" value="5">Flame Bearer</option>
            <option name="LR" value="45">Halberdier</option>
            <option name="LR" value="19">Lancer</option>
            <option name="LR" value="125">Longbowman</option>
            <option name="LR" value="24">Militia</option>
            <option name="LR" value="139">Scout of KG</option>
            <option name="LR" value="59">Sential of KG</option>
            <option name="LR" value="139">Spear Thrower</option>
            <option name="LR" value="8">Spearman</option>
            <option name="LR" value="132">Vet Bowman</option>
            <option name="LR" value="55">Vet Halberdier</option>
            <option name="LR" value="134">Vet Longbowman</option>
            <option name="LR" value="52">Vet Spearman</option>
            <option name="LR" value="129">Bear Bowman</option>
            <option name="LR" value="48">Bear Warrior</option>
            <option name="LR" value="45">Boarder</option>
            <option name="LR" value="125">Cave Hunter</option>
            <option name="LR" value="45">Cave Smasher</option>
            <option name="LR" value="0">Direwolf</option>
            <option name="LR" value="129">Lion Bowman</option>
            <option name="LR" value="48">Lion Warrior</option>
            <option name="LR" value="45">Nrsmn with Ax</option>
            <option name="LR" value="125">Nrsmn with Bow</option>
            <option name="LR" value="135">Rngd Cultist Bowman</option>
            <option name="LR" value="55">Rngd Cultist Warrior</option>
            <option name="LR" value="126">Rngd Desert Bowman</option>
            <option name="LR" value="119">Rngd Nrsmn Bowman</option>
            <option name="LR" value="41">Rngd Nrsmn Warrior</option>
            <option name="LR" value="48">Rngd Saber Warrior</option>
            <option name="LR" value="45">Saber Warrior</option>
            <option name="LR" value="45">Shark Tooth Warrior</option>
            <option name="LR" value="125">Skeleton Bowman</option>
            <option name="LR" value="45">Skeleton Warrior</option>
            <option name="LR" value="125">Stone Smasher</option>
            <option name="LR" value="72">Vet Swordsman</option>
            <option name="LR" value="0">Wolfhound</option>
          </select>
          <br>
          

          <button type="button" id="buton" onclick="myFunction()">Calculate</button>
          <br>
          <p id="result">Return</p>
          <p id="result1">Return1</p>

      </fieldset>
    </form>

javascript getelementsbyname
Original Q&A
1

There are 1 answers

2
Rahul Desai On BEST ANSWER

No. Your HTML code will be invalid if you do that.

According to the W3C documentation of <option>, it cannot have name or name1 attribute.

SOLUTION:

This is a good usecase for data- attributes. Use it like this:

<option data-name1="C" data-name2="Y" value="M">M</option>

Using data attributes | MDN

Looks like you have lot of options in your dropdown menu. I would suggest using HTML5 datalist in this case since it allows the user to search within the options.

<datalist> | MDN

EDIT:

To fetch the data attribute of the selected option, please follow the example below:

document.getElementById("selectElement").selectedIndex = -1; // so that no option is selected when the page is loaded

function getData(){
  var e = document.getElementById("selectElement"); // get the <select> element

  var data_name1 = e.options[e.selectedIndex].dataset.name1; // get the selected <option> and its name1 data attribute
  document.getElementById("data1").innerHTML = data_name1;

  var data_name2 = e.options[e.selectedIndex].dataset.name2; // get the selected <option> and its name2 data attribute
  document.getElementById("data2").innerHTML = data_name2;  

  var value = e.options[e.selectedIndex].value; // get the value of the selected <option>
  document.getElementById("value").innerHTML = value;  
}
<select id="selectElement" onchange="getData()">
  <option data-name1="1" data-name2="X" value="A">A</option>
  <option data-name1="2" data-name2="Y" value="B">B</option>
  <option data-name1="3" data-name2="Z" value="C">C</option>
</select>

<p>
  <label>data-name1 = </label>
  <span>"</span><span id="data1"></span><span>"</span>
</p>

<p>
  <label>data-name2 = </label>
  <span>"</span><span id="data2"></span><span>"</span>
</p>

<p>
  <label>value = </label>
  <span>"</span><span id="value"></span><span>"</span>
</p>

Related Questions in JAVASCRIPT

Related Questions in GETELEMENTSBYNAME

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions