好的,我的问题非常简单。一个选项可以有2个名字吗?我需要使用名称来获得2组,然后是2个子组。
所以,说我有2个选项列表。 我列出的所有内容都是“X”,列表2中的所有内容都是“C”。但是,每个选项都是别的。
的List1
<option name="X"name1="Y">
<option name="X"name1="D">
<option name="X"name1="Y">
列表2
<option name="C"name1="Y">
<option name="C"name1="D">
<option name="C"name1="Y">
那么,这可能吗?需要第一个名称来计算所选选项的总和乘以输入框中的数字。 (例如,期权价值= 3,输入= 6,总计18)
需要第二个名字来增加百分比奖励。 (例如,总数= 20,输入150%,新总数为30)
当使用getelementsbyname时,第一个名称是计算机可以在一个列表和另一个列表之间分辨。
完整代码---
<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>
答案 0 :(得分:2)
没有。如果您这样做,您的HTML代码将无效。
根据W3C documentation of <option>
,它不能具有name
或name1
属性。
<强> SOLUTION:强>
这是data-
属性的一个很好的用例。像这样使用它:
<option data-name1="C" data-name2="Y" value="M">M</option>
您的下拉菜单中看起来有很多选项。我建议在这种情况下使用HTML5 datalist
,因为它允许用户在选项中进行搜索。
修改强>
要获取所选选项的数据属性,请按照以下示例操作:
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;
}
&#13;
<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>
&#13;