使用自定义选项 (data-) 属性的内容填充输入答案

【问题标题】：Populate an input with the contents of a custom option (data-) attribute使用自定义选项 (data-) 属性的内容填充输入
【发布时间】：2016-06-01 10:08:45
【问题描述】：

在下面的示例中，我尝试使用 option.data-foo 属性的内容填充输入。我感觉如此接近......但我在某个地方有一些从后到前的东西......有什么想法吗？

我的代码：

function updateText(type) {
    var id = type+'Text';
    document.getElementById(id).data-foo = document.getElementById(type).value;
}

<form id="example" name="example">
    <select id="sensor" onchange="updateText('sensor')">
        <option value="Jval" data-foo="Jfoo">Joption</option>
        <option value="Kval" data-foo="Kfoo">Koption</option>
    </select>

    <br />
    <input type="text" value="" id="sensorText" />
</form>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

如果你使用的是 jQuery，那么使用这个：

$('#sensor').change(function() {
  $('#sensorText').val( $(this).find('option:selected').data('foo') )
})

$('#sensor').change(function() {
  $('#sensorText').val( $(this).find('option:selected').data('foo') )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="example" name="example">
  <select id="sensor">
    <option value="Jval" data-foo="Jfoo">Joption</option>
    <option value="Kval" data-foo="Kfoo">Koption</option>
  </select>

  <br />
  <input type="text" value="" id="sensorText" />
</form>

【讨论】：

sn-p 在这里工作，但如果我在本地剪切并粘贴它，即使我用更新的版本更新 1.11.1/jquery.min.js 也不起作用。并且Web控制台未报告任何错误跨度>

【解决方案2】：

你想要的，大概是这个：

var selectField = document.getElementById('sensor');
var textField = document.getElementById('sensorText');
var updateTextField = function() {
    textField.setAttribute(
        'value',
        selectField.options[selectField.selectedIndex].dataset.foo
    );
}

// Populate your text field when loading your page
updateTextField();

// Update your text field when an option is selected
selectField.addEventListener('change', updateTextField);

<form id="example" name="example">
    <select id="sensor">
        <option value="Jval" data-foo="Jfoo">Joption</option>
        <option value="Kval" data-foo="Kfoo">Koption</option>
    </select>
    <br />
    <input type="text" value="" id="sensorText" />
</form>

（另见this Fiddle）

【讨论】：

【解决方案3】：

你也可以这样解决

$("#sensor").on("change", function(){
  var $selectedItem = $(this).find(":selected");
  var dataValue = $selectedItem.data("foo");
  $("#sensorText").val(dataValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="example" name="example">
    <select id="sensor">
        <option value="Jval" data-foo="Jfoo">Joption</option>
        <option value="Kval" data-foo="Kfoo">Koption</option>
    </select>

    <br />
    <input type="text" value="" id="sensorText" />
</form>

【讨论】：

【解决方案4】：

如果您使用的是 jquery：

var value = $('#elementId').attr('data-foo');

【讨论】：

此方法不适用于选择输入，因为您需要先找到所选属性，然后才能获取数据属性。检查接受的答案以获取示例。