HTML 获取选择选项的名称

Posted 2023-03-11

【中文标题】HTML 获取选择选项的名称

【英文标题】：HTML get name of select option

【发布时间】：2017-07-27 01:04:33

【问题描述】：

我想获取 select 选项的name，但它似乎是空白的，在 codepen 中演示。获取value 是可行的，所以我想以同样的方式获取name。

如您所见，name 对于每个选项都不同，因此无法将其添加到<select> 中，我想避免使用data-，因为它需要将此边缘情况硬编码为可重用功能。

http://codepen.io/anon/pen/wJzQWW?editors=1010

<select>
  <option name="" value="" selected>Or</option>
  <option name="tags" value="123">And</option>
  <option name="not-tags" value="123">Not</option>
</select>

【问题讨论】：

这可能会让您的 html 表单感到困惑。 options 通常没有“名称”组件。你能解释一下在option 上使用name 的目的吗？

@haxxxton 后端通过拆分- 字符并读取每个组件来解析name。如果第一个组件是not，那么它会做一个SQLNOT查询等等。还有其他类似的查询修饰符，这只是一个例子。

您能利用value 属性吗？或者你需要它来做别的事情？或者，如果您必须使用name，您可能需要一个js 解决方案来创建hidden 输入，其中name 为您所追求的动态创建，因为您当前的解决方案正在运行导致你与海事组织发生冲突

【参考方案1】：

$(input).find(":selected") 将为您提供选定的选项，从那里您可以使用 val() 和 attr() 来获取值

    function parseInputs(jqElem, selector = ':input', payload = '') 
      for (let input of $(jqElem).find(selector)) 
        const value = $(input).find(":selected").val();
        const name = $(input).find(":selected").attr("name");
        if (!value) 
          continue
        
        payload += `&$name=$value`;
      
      return payload.substring(1);
   

【讨论】：

谢谢。这仍然需要对可重用函数进行一些硬编码，但这可能是我在当前规范中能得到的最好的。问题一：你为什么用const？我用let 试过了，它似乎有效，但有理由不使用它吗？

你可以使用“let”、“var”或“const”，都可以。但鉴于值和名称可能不会在该范围内改变，将它们设置为常量是最好的方法，无论是技术上还是“人为”。

【参考方案2】：

这是一个非常奇怪的问题，但我不会抱怨。 以下是你如何做到这一点的方法：

function parseInputs(jqElem, selector = ':input', payload = '') 
  payload ="";
  $(jqElem).find(selector).each(function () 
      input = $(this);
      payload += "&"
                + $(this).find("option[value=\"" + input.val() + "\"]").attr("name") //just a heads up, if there is more than one with the same value, this won't work...
                + "=" + 
                input.val();
  );
  return payload;


$('#asdf').on('click', () => 
  console.log(parseInputs('#wtf'));
);

【讨论】：

那行得通。我不确定这是否是最好的解决方案（仍在阅读逻辑），我不确定为什么有人在没有评论的情况下对你投了反对票，但它至少值得一票，因为它有效。

我也不认为它是最好的解决方案，但这个功能在原生 HTML 中确实不存在。不好意思，朋友;我希望你能得到更好的解决方案。

【参考方案3】：

也许你有一个困惑。 The tag option doesn't have a name attribute。 name 属性可以存在于select 标签中。

如果您想知道选择了哪个选项，您必须侦听select 元素的change 事件并获取valueattribue。 Look here.

或者也许你可以试试dataset 之类的东西，但你必须始终收听change 事件。

【讨论】：

好吧。对于那个很抱歉。但这是一个奇怪的问题。查看oficial spec。选项没有名称属性。如果您想做类似的事情，那么正确的方法之一就是使用数据集。

是的，我知道，这就是我在问题中所说的避免使用data-，我说了原因。事件侦听器对此似乎过分了。你没有什么可道歉的。但是，认为这比其他两个有实际工作解决方案的答案更值得关注的三位选民需要检查一下他们的大脑。