Question

想要从所选下拉选项中获取数据属性值。

<select name="selection" id="mySelect">
    <option value="21" data-rc="25" data-clnc="10">Treatment</option>
</select>

var rc = ? //value of data-rc
var clnc = ? //value of data-clnc

没有jQuery请只使用JavaScript：）

Answer 1

您可以通过dataset property了解它们。

var option = document.getElementsByTagName("option")[0];

console.log(option.dataset.rc)
console.log(option.dataset.clnc)

<option value="21" data-rc="25" data-clnc="10">Treatment</option>

或者，如果您想获取所选选项的值：

var selection = document.getElementById("mySelect");

selection.onchange = function(event){
  var rc = event.target.options[event.target.selectedIndex].dataset.rc;
  var clnc = event.target.options[event.target.selectedIndex].dataset.clnc;
  console.log("rc: " + rc);
  console.log("clnc: " + clnc);
};

<select name="selection" id="mySelect">
<option value="21" data-rc="25" data-clnc="10">Treatment</option>
<option value="21" data-rc="23" data-clnc="30">Treatment1</option>
<option value="21" data-rc="31" data-clnc="50">Treatment2</option>
<option value="21" data-rc="14" data-clnc="75">Treatment3</option>
</select>

Answer 2

假设我们有一个选择字段

    <select id="ddlViewBy">
      <option value="1" data-rc="25" data-clnc="10" selected="selected">test1</option>
      <option value="2" >test2</option>
      <option value="3">test3</option>
    </select>

现在我们将获得选择列表及其选择的选项

    var e = document.getElementById("ddlViewBy");
    var option= e.options[e.selectedIndex];

现在我们有了选择的选项，我们可以得到它的属性

    var attrs = option.attributes;

attrs是你可以按你想要的索引得到的属性数组。

或者你可以通过

获得属性

    var datarc = option.getAttribute("data-rc");

Answer 3

    var mySelect = document.querySelector('#mySelect')
        console.log('mySelect value ' + mySelect.value)
        console.log('mySelect data-rc ' + mySelect.selectedOptions[0].getAttribute("data-rc"))
        console.log('mySelect data-clnc ' + mySelect.selectedOptions[0].getAttribute("data-clnc"))

<select name="selection" id="mySelect">
    <option value="21" data-rc="25" data-clnc="10">Treatment</option>
</select>

Answer 4

您可以使用jquery选择器

执行此操作

var rc = $('select option:selected').data('rc');

Answer 5

$（选择器）.find（＆＃34;选项：选择＆＃34;）。数据（＆＃34; rc＆＃34;）用于rc和clnc用于clnc，其中选择器是你的＆＃34;选择＆＃34 ;标签ID / class

Answer 6

检查此工作笔

working pen

$('#options').on('change', function(){
    alert($(this).find("option:selected").attr('data-rc'))
    alert($(this).find("option:selected").attr('data-clnc'))
});

如何在JavaScript

6 个答案: