php - さまざまなドロップダウン メニュー オプションの選択時に変更する入力フィールドの値

Question

HTML を使用して注文フォームを作成しています。ここで、「どの色」のドロップダウン メニューと、「金額」の読み取り専用になる対応する入力フィールドを追加する必要があります。注文フォームの作成は簡単ですが、「色」ドロップダウン メニューから選択した「色」に応じて「金額」の値を変更したいと考えています。「どの色」ドロップダウン メニュー内に 5 つのオプションがあるとします。

1. 黒
2. 白
3. 青い
4. 緑
5. オレンジ

<select id="color">
     <option value="Black">Black</option>
     <option value="White">White</option>
     <option value="Blue">Blue</option>
     <option value="Green">Green</option>
     <option value="Orange">Orange</option>
</select>

また、各色には対応する量が設定されています。たとえば、次のようになります。

1. ブラック = $100
2. ホワイト = $200
3. 青 = $300
4. 緑 = $400
5. オレンジ = $500

今私が欲しいのは、ドロップダウンからさまざまな色のオプションが選択されたときに、「金額」の入力フィールドにさまざまな値を表示することです。たとえば、「青」という色が選択されている場合、値「$300」が金額の読み取り専用入力フ​​ィールドに表示され、選択されたオプションに応じて変化し続ける必要があります。

これはJavaScriptを使用して行うことができると推測していますが、これにはかなり慣れていないため、少し難しいと感じています。基本的なフォームは次のようになります。

<form action="#" method="post">

  <select id="color">
     <option value="Black">Black</option>
     <option value="White">White</option>
     <option value="Blue">Blue</option>
     <option value="Green">Green</option>
     <option value="Orange">Orange</option>   </select>

  <input name="amount" value="" readonly="readonly" onfocus="this.blur()" />

</form>

解決策をお待ちしております。ありがとう。

Answer 1

これは、最新のブラウザー向けの比較的単純なソリューションであり、作業の開始点となるはずです。

function updatePrice (el, priceLog, priceList) {
    priceLog.value = '$' + priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
}

var colorPrices = {
    'black' : 100,
    'white' : 200,
    'blue' : 300,
    'green' : 400,
    'orange' : 500
};

var select = document.getElementById('color'),
    hidden = document.getElementsByName('amount')[0];

select.addEventListener('change', function(){
    updatePrice(select, hidden, colorPrices);
});

JS フィドルのデモ。

• document.getElementById().
• document.getElementsByTagName().
• Element.addEventListener().
• selectedIndex.
• String.toLowerCase().

Answer 2

これを試して ：

<form action="#" method="post">
<select id="color" onchange="func()">
 <option value="Black">Black</option>
 <option value="White">White</option>
 <option value="Blue">Blue</option>
 <option value="Green">Green</option>
 <option value="Orange">Orange</option>   </select>
<input name="amount" id ="valu" value="" readonly="readonly" />
</form>

Javascript :

function func() {
    var option = document.getElementById("color").value;
    if (option =='Black')
    {
    $('#valu').val(100);
    }
        if (option =='White')
    {
    $('#valu').val(200);
    }
        if (option =='Blue')
    {
    $('#valu').val(300);
    }

        if (option =='Green')
    {
    $('#valu').val(400);
    }

        if (option =='Orange')
    {
    $('#valu').val(500);
    }


};

JSFiddle