javascript更新4個下拉菜單和2個複選框按鈕的價格。

上述代碼不按我想要的方式工作。只要他選擇一個期權價格應該更新（在這一點上警報框會做），用戶應該能夠從每個下拉菜單&中選擇一個選項。用戶應該能夠重新選擇任何下拉菜單，如果他/她需要並且相應地進行適當的計算。javascript更新4個下拉菜單和2個複選框按鈕的價格。

<html> 
    <head> 
     <title>Title</title> 
     <link rel="stylesheet" href="file.css">   

     <script type="text/javascript">  
      function dropdown() { 
       var drp = document.getElementById("numberlist"); 
       var optn = document.createElement("OPTION"); 
       optn.text="3"; 
       optn.value="3"; 
       drp.add(optn); 
       } 

      function Add() { 
       var e = document.getElementById('numberlist'); 
       var txt = e.options[e.selectedIndex].text; 
       var txt_int = parseInt(txt); 
       var final_txt = show(txt_int); 
       //return final_txt; 

       //alert(txt_int); 
      } 


      function show(price) { 

       if(document.my_form.but1.checked == true) { 
        //alert("Box1 is checked"); 
        price += 10; 
        } 

       else if(document.my_form.but2.checked == true) { 
        //alert("Box 2 is checked"); 
        price += 15; 
        } 

       //return price; 
       alert(price); 
      } 

     </script> 
    </head> 
    <body onload="dropdown();"> 

    <form name="my_form"> 
     <select id="numberlist" onchange="Add()"> 
      <option>Select</option> 
      <option>12</option> 
      <option>24</option> 
      <option>36</option> 
     </select> 

     <select id="numberlist" onchange="Add()"> 
      <option>Select</option> 
      <option>12</option> 
      <option>24</option> 
      <option>36</option> 
     </select> 

     <select id="numberlist" onchange="Add()"> 
      <option>Select</option> 
      <option>12</option> 
      <option>24</option> 
      <option>36</option> 
     </select> 

     <select id="numberlist" onchange="Add()"> 
      <option>Select</option> 
      <option>12</option> 
      <option>24</option> 
      <option>36</option> 
     </select> 

     <br /> <p> 

     <input type="checkbox" name=but1 onchange="show()"> Gift Wrap $10 <br /> 
     <input type="checkbox" name=but2 onchange="show()"> Express Shipping $15<br /> <p> 

    </form> 


    </body> 
</html>

來源

2014-09-19 Himanshu1988

我們可以提供使用jQuery的解決方案？非常短的代碼相比，正常的JavaScript。 – 2014-09-19 19:43:49

謝謝你的代碼。我的jQuery解決方案也是可以接受的。 – Himanshu1988 2014-09-20 05:11:34

有幾個問題我看到了蝙蝠的權利。

您選擇的元素都具有相同的id屬性。這是一個明確的禁忌。 document.getElementById（）的使用只會返回一個元素。

如果您希望獲取Add（）和dropdown（）函數中所有選擇字段的句柄，則應該使用name屬性而不是id屬性，並使用document.getElementsByName（nameValue ）。這將返回您想要用for循環遍歷的所有select元素的數組。

另一個問題是你的show（）函數。你在函數中定義了參數「價格」，買你沒有用「價格」參數調用函數。您可以定義一個全局價格變量，這個變量可以被窗口中的所有函數訪問。

//Define a global price variable that will be visible to every function 
 
var price; 
 

 
//Add extra option to 'numberlist' select elements 
 
function initDropdownOptions() { 
 
    //Grab all select elements by their name attribute 
 
    var selectElements \t = document.getElementsByName("numberlist"); 
 

 
    //Initialize/Define for loop conditions variables 
 
    var numberOfDropdowns = selectElements.length; 
 
    var i; 
 

 
    //Define a reusable temp option variable to be reused 
 
    var optn; 
 

 
    //Iterate over select elements 
 
    for(i = 0; i < numberOfDropdowns; i++){ 
 
    //Create a new option element and save it to the optn variable 
 
    optn = document.createElement("OPTION"); 
 

 
    //Set the text of the option 
 
    optn.text="3"; 
 

 
    //Set the value of the option 
 
    optn.value="3"; 
 

 
    //Add the option to the ith select element 
 
    selectElements[i].add(optn); 
 
    } 
 
} 
 

 
function calculatePrice() { 
 
    //Grab all select elements by their name attribute 
 
    var selectElements \t = document.getElementsByName("numberlist"); 
 

 
    //Initilize/Define for loop conditions variables 
 
    var i; 
 
    var numberOfDropdowns = selectElements.length; 
 
    
 

 
    //Define a temp holder for the select values 
 
    var tmpSelectValue; 
 

 
    //Initialize the global price variable to 0 
 
    price = 0; 
 

 
    for(i = 0; i < numberOfDropdowns; i++){ 
 
    //Extract the value from the select element 
 
    tmpSelectValue = selectElements[i].options[ selectElements[i].selectedIndex ].value 
 
    
 
    //Parse the tmpSelectValue into a number and add it to the global price 
 
    price += parseFloat(tmpSelectValue); 
 
    } 
 

 
    //Add additional Charges if they are applicable 
 
    var giftWrapChecked \t \t = (document.my_form.but1.checked == true); 
 
    var expressShippingChecked \t = (document.my_form.but2.checked == true); 
 
    
 
    if(giftWrapChecked) { 
 
    //Add aditional 10$ 
 
    price += 10; 
 
    } 
 

 
    if(expressShippingChecked) { 
 
    //Add additional 15$ 
 
    price += 15; 
 
    } 
 

 
    //Output the price to the currentPrice div 
 
    document.getElementById("currentPrice").innerHTML = price; 
 

 
}

<html> 
 
    <head> 
 
     <title>Title</title> 
 
     <link rel="stylesheet" href="file.css">   
 
    </head> 
 
    <body onload="initDropdownOptions();"> 
 

 
    <form name="my_form"> 
 

 
     <select name="numberlist" onchange="calculatePrice()"> 
 
      <option value='0'>Select</option> 
 
      <option value='12'>12</option> 
 
      <option value='24'>24</option> 
 
      <option value='36'>36</option> 
 
     </select> 
 

 
     <select name="numberlist" onchange="calculatePrice()"> 
 
      <option value='0'>Select</option> 
 
      <option value='12'>12</option> 
 
      <option value='24'>24</option> 
 
      <option value='36'>36</option> 
 
     </select> 
 

 
     <select name="numberlist" onchange="calculatePrice()"> 
 
      <option value='0'>Select</option> 
 
      <option value='12'>12</option> 
 
      <option value='24'>24</option> 
 
      <option value='36'>36</option> 
 
     </select> 
 

 
     <select name="numberlist" onchange="calculatePrice()"> 
 
      <option value='0'>Select</option> 
 
      <option value='12'>12</option> 
 
      <option value='24'>24</option> 
 
      <option value='36'>36</option> 
 
     </select> 
 

 
     <br /> 
 
     
 
     \t <p> 
 
\t \t <input type="checkbox" name=but1 onchange="calculatePrice()"> Gift Wrap $10 <br /> 
 
     \t <input type="checkbox" name=but2 onchange="calculatePrice()"> Express Shipping $15<br /> 
 
     \t <p> 
 
      
 
     <div id='currentPrice'></div> 
 

 
    </form> 
 

 

 
    </body> 
 
</html>

來源

2014-09-19 19:25:56

這可以使用jQuery來輕鬆完成：

試試：

<html> 
<head> 
<title>Title</title> 
<link rel="stylesheet" href="file.css" /> 
</head> 
<body> 
<form name="my_form"> 
    <select id="numberlist1" class="dropdown"> 
    <option value="0">Select</option> 
    <option value="12">12</option> 
    <option value="24">24</option> 
    <option value="36">36</option> 
    </select> 
    <select id="numberlist2" class="dropdown"> 
    <option value="0">Select</option> 
    <option value="12">12</option> 
    <option value="24">24</option> 
    <option value="36">36</option> 
    </select> 
    <select id="numberlist3" class="dropdown"> 
    <option value="0">Select</option> 
    <option value="12">12</option> 
    <option value="24">24</option> 
    <option value="36">36</option> 
    </select> 
    <select id="numberlist4" class="dropdown"> 
    <option value="0">Select</option> 
    <option value="12">12</option> 
    <option value="24">24</option> 
    <option value="36">36</option> 
    </select> 
    <br /> 
    <p> 
    <input type="checkbox" name="but1" value="10" /> 
    Gift Wrap $10 <br /> 
    <input type="checkbox" name="but2" value="15" /> 
    Express Shipping $15<br /> 
    <p> 
</form> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script type="text/javascript"> 
$('input:checkbox, select.dropdown').change(function(){ 

var price = 0; 
$('input:checkbox, select.dropdown').each(function(){ 
// Your Show function 
if($(this).is('input:checkbox')) 
{ 
if($(this).is(':checked')) 
    price += parseInt($(this).val()); 
} 
else 
price += parseInt($(this).val()); 


}); 

alert(price); 
}); 
</script> 
</body> 
</html>

來源

2014-09-19 20:04:38

javascript更新4個下拉菜單和2個複選框按鈕的價格。

回答

相關問題