JavaScriptを使用して、選択ボックスに基づいてテキストボックスの値を更新するにはどうすればよいですか？

Question

フォームに2つの入力ボックスがあります。 1つはドロップダウン選択で、もう1つはテキストボックスです。

選択ボックスで選択する内容に応じて、テキストボックスの値を更新する必要があります。 たとえば、選択ボックスで「1」を選択した場合、テキストボックスの値は「299.00」に、「2」を選択するとテキストボックスの値は「399.0」になります。

コードの編集を手伝ってもらえますか？進んでいただきありがとうございます。

は、ここに私のhtmlコードです：

<select style="width: 25%;height:25px;margin-left:15px;" onchange="ChooseContact(this)"> 
<option id="extra1" value='1'>1</option> 
<option id="extra2" value='2'>2</option> 
</select> 
<input style="width: 25%;margin-left:15px;" id="extraper"> 

、ここでのjavascriptです：

function ChooseContact(data) { 

    var x = 0; 
    var y = 0; 
    var e = obj.id.toString(); 
     if (e == 'tb1') { 
      x = Number("PHP 299"); 
      y = document.getElementById ("extraper").value = x; 
     } 
}; 

私はjavascriptのは間違っていると確信しています。あなたはそれで私を助けることができますか？

Answer 1

jQueryを使用すると、目的のコードは非常に簡単です。このフィドルを確認してください。https://jsfiddle.net/u3Ljpeyk/

HTML：

<select name="extra" id="extraselect"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<input type="text" id="extrawrapper"> 

JS：

$('#extraselect').on('change', function() { 
    var extraVal = $(this).val(); 
    if (extraVal == '1') { 
     $('#extrawrapper').val('299.00'); 
    } else if (extraVal == '2') { 
     $('#extrawrapper').val('399.00'); 
    } 
}); 

Answer 2

あなたは選択のIDを追加し、あなたの選択への参照を取得するために見つけるgetElementByIdを（）関数を使用することができます

function ChooseContact() { 
 

 
    var x = 0; 
 
    var y = 0; 
 
    var e = document.getElementById ('myselect'); 
 
    var selectedoption= Number(e.value)+1; 
 
\t var result= selectedoption+'99.0'; 
 
\t var myInput= document.getElementById ('extraper'); 
 
\t myInput.value=result; 
 
};

<select id="myselect" style="width: 25%;height:25px;margin-left:15px;" onchange="ChooseContact()"> 
 
<option id="extra1" value='1'>1</option> 
 
<option id="extra2" value='2'>2</option> 
 
</select> 
 
<input style="width: 25%;margin-left:15px;" id="extraper"/>