Html select onchange獲取自定義屬性值設置爲其他輸入值

Question

onchange我想獲得選擇選項自定義屬性並設置爲其他輸入值。不知何故，我無法在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來解決此問題，以在讀取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">

Answer 2

在您使用#test這是id所有選項，所以它總是會考慮ID test的第一次出現你的問題。因此，不要在同一個DOM上多次使用相同的id，如果需要，請將其更改爲class="test"，否則，您需要定位選定的選項，並且不需要任何id或class。請點擊這裏：

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