javascript - 一个 <option> 可以有多个名称吗？获取<option>的数据属性？-6ren

javascript - 一个

转载作者：行者123 更新时间：2023-12-02 16:45:08

好的，我的问题很简单。一个选项可以有 2 个名称吗？我需要使用名称来获取 2 个组，然后是 2 个子组。

所以，假设我有 2 个选项列表。我列出的所有内容都是“X”，列表 2 中的所有内容都是“C”。然而，每个选项也是不同的。

列表1

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

最佳答案

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

根据W3C documentation of <option> ，它不能有name或name1属性。

解决方案:

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

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

Using data attributes | MDN

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

<datalist> | MDN

编辑:

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

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>

关于javascript - 一个 <option> 可以有多个名称吗？获取<option>的数据属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27162639/

文章推荐： javascript - 单击添加类(class)，然后延迟删除类(class)

文章推荐： symfony - 内容长度: 0 in a json response Symfony2

文章推荐： php - 第二个 AJAX 调用卸载第一个的结果

c++ - 如何将字符串数组的值分配给 "Name"+ #，例如。名称 1、名称 2、名称 3 等。C++
我正在尝试做这样的事情:Name[i] = "Name"+ (i+1) 在 forloop 中，这样数组的值将是:Name[0] = Name1，Name[1] = Name2，Name[2] = N
javascript - 如何从Javascript或JQuery获取Grails中的 Action 名称(或 View 名称)
我读了here，在GSP中我们可以这样写: ${params.action} 从GSP中，我们可以使用${params.action}作为参数调用Javascript函数(请参阅here)。是否有其
java - 如何解析名称=值^^名称=值^^名称=值
我的问题:非常具体。我正在尝试想出解析以下文本的最简单方法: ^^domain=domain_value^^version=version_value^^account_type=account_ty
cakephp 路由修改 Controller 名称/获取 Controller 名称
我创建了一条与此类似的路线: Router::connect("/backend/:controller/:action/*"); 现在我想将符合此模式的每个 Controller 路由重命名为类似
sql - 警告 SQL71502 - 过程 <名称> 具有对对象 <名称> 的未解析引用
我在 Visual Studio 2013 项目中收到以下警告: SQL71502 - Procedure has an unresolved reference to object 最佳答案这可以
c# - 名称/值 .NET 集合或 .NET 名称/值字典？
任何人都可以指导我使用名称/值 .NET 集合或 .NET 名称/值字典以获得最佳性能吗？请问最好的方法是什么？我的应用程序是 ASP.NET、WCF/WF Web 应用程序。每个集合应该有 10 到
php - Zend Framework 2中如何获取 Controller 名称、 Action 名称
我在 Zend Framework 2 中有一个默认模块: namespace Application\Controller; use Zend\Mvc\Controller\AbstractActi
javascript - 在 javascript 中，这是一个有效的结构吗？ : document. 名称.名称.值？
这是表格: 关于javascript - 在 javascript 中，这是一个有效的结构吗？ : document. 名称.名称.值？，我们在Stack Overflow上找到一个类似的
asp.net-mvc - 给定 htmlHelper + Action 名称，如何找出 Controller 名称？
HtmlHelper.ActionLink(htmlhelper,string linktext,string action) 如何找出正确的路线？如果我有这个=> HtmlHelper.Actio
javascript - Angular Directive(指令) > 动态 Controller 名称 > 插值 Controller 名称
我需要一些有关如何将 Controller 定义传递给嵌套在 outer 指令中的 inner 指令的帮助。请参阅http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan一个
algorithm - 排行榜的高效数据结构，即记录列表(名称、积分) - 高效搜索(名称)、搜索(排名)和更新(积分)
请提出一个数据结构来表示内存中的记录列表。每条记录由以下部分组成: 用户名积分排名(基于积分)- 可选字段- 可以存储在记录中或可以动态计算数据结构应该支持高效实现以下操作: Insert(re
apache-spark - Spark : Union can only be performed on tables with the compatible column types. 结构<名称，ID> != 结构
错误 : 联合只能在具有兼容列类型的表上执行。结构(层:字符串，skyward_number:字符串，skyward_points:字符串)<> 结构(skyward_number:字符串，层:字符
scala - 名称/惰性函数的重复参数
我想要一个包含可变数量函数的函数，但我希望在实际使用它们之前不要对它们求值。我可以使用 () => type 语法，但我更愿意使用 => type 语法，因为它似乎是为延迟评估而定制的。当我尝试这样
当前本地键盘映射的 Emacs 名称？
我正在编写一个 elisp 函数，它将给定键永久绑定(bind)到当前主要模式的键盘映射中的给定命令。例如， (define-key python-mode-map [C-f1] 'pytho
r - “名称”属性的长度必须与向量的长度相同
卡在R中的错误上。 Error in names(x) <- value : 'names' attribute must be the same length as the ve
python - 正则表达式从字符串中提取用户名/名称
我有字符串，其中包含名称，有时在字符串中包含用户名，后跟日期时间戳: GN1RLWFH0546-2020-04-10-18-09-52-563945.txt JOHN-DOE-2020-04-10-1
c# - 名称 `Array'在当前上下文中不存在
有人知道为什么我会收到此错误吗？这显示将我的项目升级到新版本的Unity3d之后。 Error CS0103: The name `Array' does not exist in the curre
Delphi:从数据集中读取列数+名称？
由于 Embarcadero 的 NNTP 服务器从昨天开始就停止响应，我想我可以在这里问:我使用非数据库感知网格，我需要循环遍历数据集以提取列数、它们的名称、数量行数以及每行中每个字段的值。我知道
android - 在根项目的gradle子项目中设置Android版本代码/名称
在构建Android应用程序的子项目中，我试图根据根build.gradle中的变量设置版本代码/名称。子项目build.gradle: apply plugin: 'com.android.app
javascript - 如何在不使用硬编码字符串的情况下传递javascript属性(名称)？
示例用例: 我有一个带有属性“myProperty”的对象，具有 getter 和 setter(自 EcmaScript 5 起支持“Property Getters 和 Setters”:http

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城