Html select onchange 获取自定义属性值设置为其他输入值答案

【问题标题】：Html select onchange get custom attribute value set to other input valueHtml select onchange 获取自定义属性值设置为其他输入值
【发布时间】：2017-10-06 07:35:48
【问题描述】：

onchange 我想获取选择选项自定义属性并设置为其他输入的值。不知何故，我无法在选择的输入 onchange 中获得course_price。它只显示输入中的第一个选项值。

function selectFunction(e) {
  var value1 = $("#test").data('typeid'); //to get value
  document.getElementById("money").value = value1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" onchange="selectFunction(event)">
  <option id="test" data-typeid="<?php echo $row1['course_price']?>" 
  value="<?php echo $row1['course_id']?>"><?php echo $row1['course_name']?>
  </option>
</select>

<input type="number" value="" id="money" class="form-control">

【问题讨论】：

标签： javascript php jquery html

【解决方案1】：

问题是因为data-typeid 属性在选定的option 上，而不是select，所以您的jQuery 代码正在查看错误的元素。您可以通过使用find() 和:selected 来解决此问题，在从中读取data 属性之前获取所选的option。

还要注意on* 属性已经过时了。您应该使用不显眼的事件处理程序，如下所示：

$(function() {
  $('select.form-control').change(function() {
    var typeId = $(this).find('option:selected').data('typeid');
    $("#money").val(typeId);
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
  <option data-typeid="1111" value="courseId1">courseName1</option>
  <option data-typeid="2222" value="courseId2">courseName2</option>
</select>

<input type="number" value="" id="money" class="form-control">

【讨论】：

【解决方案2】：

在您的问题中，您使用的是#test，即id 用于所有选项，因此它始终会考虑id test 的第一次出现。所以不要在同一个 DOM 上多次使用同一个 id，如果需要，将其更改为 class="test"，否则，您需要定位选定的选项，它不需要任何 id 或类。在这里检查：

var type_id = $('select option:selected').attr('data-typeid');

并将变量赋值给输入框：

document.getElementById("money").value =type_id;

所以整个更新后的函数会是这样的：

function selectFunction(e) {
    var type_id = $('select option:selected').attr('data-typeid'); //to get value
    document.getElementById("money").value =type_id;
}

【讨论】：

【解决方案3】：

另一种方法：

$(document).on('change', 'select.form-control', function() {
  var r = $('select.form-control option[value="'+$(this).val()+'"]').attr("data-typeid")
  $("#money").val(r)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
  <option selected disabled>-- Select one --</option>
  <option data-typeid="1111" value="courseId1">courseName1</option>
  <option data-typeid="2222" value="courseId2">courseName2</option>
</select>

<input type="number" value="" id="money" class="form-control">

【讨论】：