输入字段值在选择不同的下拉菜单选项时发生变化 [英] input field value to change upon selection of different dropdown menu options

问题描述

我使用HTML创建订单表单，在这里我需要为'数量'添加一个'哪种颜色'和一个相应的输入字段的下拉菜单，该字段是只读的。创建订单很容易，但现在我想要的是'金额'值根据从'哪个颜色'下拉菜单中选择'颜色'而改变。假设我们在'哪个颜色'下拉菜单中有五个选项，即：

1. 黑色

白

2. 蓝


3. 绿


4. 橙
ol>






 < select id =color> 
< option value =Black>黑色< / option> 
< option value =White>白色< / option> 
< option value =Blue>蓝色< / option> 
< option value =Green>绿色< / option> 
< option value =Orange>橙色< /选项> 
< / select> 
  




并且每种颜色都有相应的金额设置，例如：





1. 黑色= $ 100


2. 白色= 200美元
   
3. 蓝色= $ 300


4. 绿色= $ 400


5. 橙色= $ 500
   
   
   

   现在我想要的是，当从下拉列表中选择不同的颜色选项时，我希望量的输入字段显示不同的值。例如，如果选择了蓝色颜色，则应在只读输入字段中显示值$ 300的值，并且应根据所选的选项继续更改。

   
   
   

   我假设可以使用javascript来完成这项工作，但由于我对此相当陌生，因此我发现它有点困难。这是基本形式的外观：
   
   

   
   

    < form action =＃method = 后 > 
    
   < select id =color> 
   < option value =Black>黑色< / option> 
   < option value =White>白色< / option> 
   < option value =Blue>蓝色< / option> 
   < option value =Green>绿色< / option> 
   < option value =Orange>橙色< /选项> < /选择> 
    
   < input name =amountvalue =readonly =readonlyonfocus =this.blur（）/> 
    
   < / form> 
     

   
   

   期待获得解决方案。感谢。

   解决方案

   这是一个相对简单的解决方案，适用于最新的浏览器，并且应该为您提供一个起点从$：
   
   

     function updatePrice（el，priceLog，priceList）{
    priceLog.value ='$'+ priceList [el.getElementsByTagName（ '选项'）[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 Fiddle演示。

   
   
   
   
   
   • document.getElementById（） 。
   
   
   • document.getElementsByTagName（）
   
   
   • Element.addEventListener（） 。
   
   
   • selectedIndex 。
   
   
   • String.toLowerCase（） 。
     
   
   

   I am creating an order form, using HTML, where I need to add a dropdown menu for 'which color' and a corresponding input field, which will be read-only, for the 'amount'. Creating the order form is easy but now what I want is that I want the 'amount' value to change depending on which 'color' has been selected from the 'which color' dropdown menu. Lets say that we've five options inside the 'which color' dropdown menu, namely:

   1. Black
   2. White
   3. Blue
   4. Green
   5. Orange

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

   And that each color has a corresponding amount set, for example:

   1. Black = $100
   2. White = $200
   3. Blue = $300
   4. Green = $400
   5. Orange = $500

   Now what I want is that I want the input field for 'amount' to show different values when different options of colors are selected from the dropdown. For example if the color 'blue' is selected, then the value '$300' should be shown in the read-only input field for amount and it should keep on changing depending on which option is selected.

   I am presuming that this can be done using javascript but as I am fairly new to this, I am finding it a bit difficult. This is how the basic form would look:

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

   Looking forward to get a solution. Thanks.

   解决方案

   This is a relatively simple solution, for up-to-date browsers, and should give you a starting point to work from:

   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 Fiddle demo.

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

   这篇关于输入字段值在选择不同的下拉菜单选项时发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！