Question

onchange我想获取select选项自定义属性并设置为其他输入的值。不知怎的，我无法在select的输入中获得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">

Answer 1

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

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

在您的问题中，您使用#test 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;
}

Answer 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">

Html select onchange将自定义属性值设置为其他输入值

3 个答案: