html - 如何在下拉列表中获取选项标签的自定义属性？答案

【问题标题】：html - how to get custom attribute of option tag in dropdown?html - 如何在下拉列表中获取选项标签的自定义属性？
【发布时间】：2012-08-11 01:29:21
【问题描述】：

如果我有这个代码：

 <select onchange="alert('?');" name="myname" class="myclass"> 
    <option isred="-1" value="hi">click</option>
 </select>

如何从自定义属性 isred 中获取值“-1”？我不想使用 value 属性。而且我不想通过名称或 id 来定位选项标签。

我想要onchange="alert(this.getselectedoptionID.getAttribute('isred'));"之类的东西

谁能帮忙？

我也不想使用 jquery。

【问题讨论】：

How do you get the currently selected <option> in a <select> via JavaScript? 的可能重复项 - 似乎您知道如何获取属性，而不是如何获取所选选项...嗯，该问题已涵盖。

标签： javascript html select

【解决方案1】：

您需要弄清楚 selectedIndex 是什么，然后从该 options[] 数组中找出 getAttribute。

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass"> 
    <option isred="-1" value="hi">click</option>
    <option isred="-5" value="hi">click</option>
</select>

jsFiddle DEMO

附注：

不要在您的 HTML 中使用内联 javascript。您希望将业务逻辑与 UI 分开。创建一个 javascript 事件处理程序来处理这个问题。（jQuery / Angular / 等）

【讨论】：

@Mark Pieszak，想象一下我有这个代码：<input onchange="update(this.value, this.getAttribute('code'))" value="1" id="quantity_1001" code="1001" type="number"> 你有什么更好的方法来代替内联 onchange 声明？我希望将值作为参数传入！提前致谢！
@ShahedBinSatter 在javascript中设置更改事件
如何将值（this.value 和 this.getAttribute('code')）作为参数传递？
onchange="myFunc(this.value, this.getAttribute('code'))" 在您的实际 JS 代码中，“myFunc”是 function myFunc(val, code) { /* do something */ }。理想情况下，甚至不要使用onchange 方法，而是在 JS 本身中设置 onchange 方法，但这是一个单独的概念，但您可以在网上查找它，看看它是如何完成的！希望有帮助。干杯

【解决方案2】：

在 jquery 中，你可以写：

$("#myname").find(':selected').attr('isred');

【讨论】：

OP 明确表示他/她不想使用 jQuery。
很高兴你写了它，因为它帮助了我:)
正是我想要的。
这应该被标记为正确答案

【解决方案3】：

使用这样的东西：

document.getElementById("x").onchange = function () {
    console.log(this.options[this.selectedIndex].getAttribute("isred"));
};

【讨论】：

如果我想在提交表单时获取自定义属性怎么办？

【解决方案4】：

假设我们有一个HTML 标记如下：

<form id="frm_">
    <select name="Veh">
        <option value='-1' selected='selected'>Select</option>
        <option value='0' ren='x'>xxx</option>
        <option value='1' ren='y'>yyy</option>
    </select>
</form>

attr "ren" 可以这样访问：

function getRep() {
    var ren = document.forms['frm_'].elements['Veh'].options[document.forms['frm_']
                 .elements['Veh'].selectedIndex].getAttribute('ren');
    console.log("Val of ren " + ren); //x or y
}

Demo

【讨论】：

您提供的代码有错误需要解决，然后才能发布以供他人使用。如果您将重要的代码与答案一起发布而不是用户导航到您的 jsfiddle 链接，您的答案会更有帮助。到目前为止，我已经代表您完成了。

【解决方案5】：

//Pure Javascript solution, and elegant one check if you really want to leverage the power of javascript.

// Listening to a onchange event by ID attached with the select tag.
document.getElementById("name_your_id").onchange = function(event) {

//event.target.selectedOptions[0] have that option. as this is single selection by dropdown. this will always be 0th index :) 
let get_val = event.target.selectedOptions[0].getAttribute("isred");
console.log("Value from the Attribute: ", get_val)
}

 <select id="name_your_id" name="myname" class="myclass">
    <option isred="423423" value="hi">One</option>
    <option isred="-1" value="hi">Two</option>
 </select>

【讨论】：

【解决方案6】：

你使用：.getAttribute('isred')

你想要：

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">
    <option isred="-1" value="hi">click</option>
    <option isred="-1" value="ho">click</option>
</select>

【讨论】：

你的意思是像 onchange="alert(.getAttribute('isred'));" ?

【解决方案7】：

你可以

$(".myclass").val(function(){alert($("option",this).attr("isred"));})

【讨论】：

这总是提醒第一个选项的值（与选定的选项相反）isred 属性，它取消选择选定的选项，并且问题说 not 使用 jQuery。