javascript - Html select onchange get custom attribute value set to other input value - Stack Overflow

admin管理员组

文章数量:1431904

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

Share Improve this question Follow edited Oct 6, 2017 at 7:45 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Oct 6, 2017 at 7:35 B.CosB.Cos 44822 gold badges1313 silver badges2828 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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">

本文标签： javascriptHtml select onchange get custom attribute value set to other input valueStack Overflow