<option>可以有多个名字吗?获取</option> <option>?</option>的数据属性

时间:2014-11-27 03:32:17

标签: javascript getelementsbyname

好的,我的问题非常简单。一个选项可以有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>

1 个答案:

答案 0 :(得分:2)

没有。如果您这样做,您的HTML代码将无效。

根据W3C documentation of <option>,它不能具有namename1属性。

<强> SOLUTION:

这是data-属性的一个很好的用例。像这样使用它:

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

Using data attributes | MDN

您的下拉菜单中看起来有很多选项。我建议在这种情况下使用HTML5 datalist,因为它允许用户在选项中进行搜索。

<datalist> | MDN

修改

要获取所选选项的数据属性,请按照以下示例操作:

&#13;
&#13;
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;
&#13;
&#13;