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>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>
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.
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>