HTML select onchange獲取將自定義屬性值設置為其他輸入值

Question

onchange我想獲取選擇選項的custom屬性並將其設置為其他輸入的值。 我以某種方式無法在選擇的輸入course_price中獲得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屬性位於selected option ，而不是select ，因此您的jQuery代碼正在尋找錯誤的元素。 您可以通過使用解決這個問題find()和:selected獲得所選擇的option讀取之前data ，從它的屬性。

還要注意， 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或類。 在這里檢查：

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