onchange I want to get the select option custom attribute and set to the other input's value. Somehow I cannot get the course_price in the input onchange of the select. It only shows the first option value in the input only.

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

<script src=".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">

onchange I want to get the select option custom attribute and set to the other input's value. Somehow I cannot get the course_price in the input onchange of the select. It only shows the first option value in the input only.

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

<script src="https://ajax.googleapis./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

3 Answers 3

The issue is because the data-typeid attribute is on the selected option, not the select, so your jQuery code is looking at the wrong element. You can fix this by using find() and :selected to get the chosen option before reading the data attribute from it.

Also note that on* attributes are very outdated. You should be using unobtrusive event handlers, something like this:

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

<script src="https://ajax.googleapis./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">

In your question you are using #test which is id for all options and so it will always consider first occurance of id test. So do not use same id multiple times on the same DOM, change it to class="test" if you need it, otherwise, you need to target the selected option, and it will not need any id or class. Check here:

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

and assign the variable to input box:

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

So the entire updated function will be like this:

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

Another way to make it:

$(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./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">