Html select onchange他の入力値にカスタム属性値を設定する

Question

onchange選択オプションのカスタム属性を取得し、他の入力値に設定したいとします。どういうわけか私は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*の属性は古くなっています。あなたはすべてのオプションについてidあるので、それは常にID testの最初のoccuranceを検討するどの#testを使用しているあなたの質問に

$(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

：あなたは、このような何かを控えめなイベントハンドラを使用する必要があります。したがって同じIDを同じDOMで複数回使用しないでください。必要に応じて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">