0

onchangeを使用してドロップダウンメニューから入力を受け取る次の2つの関数があります

  <script>

 current_fin = "none";
 current_mat = "Pine";



// Pass the current selection into a variable to use.
function getMaterial()
{
    var mat = document.getElementById("dropdownone");
    var current_mat = mat.options[mat.selectedIndex].text;
$("#price").html("Material is: " + current_mat  + "<br/>" +"Finish is: " + current_fin);
}
function getFinish()
{
    var fin = document.getElementById("dropdowntwo");
     var current_fin = fin.options[fin.selectedIndex].text;
$("#price").html("Material is: " + current_mat  + "<br/>" +"Finish is: " + current_fin);
}
</script>

選択されたものの値を div #price に書き込むだけです。今、問題は、一方を変更してから他方を変更すると発生します。2 つのボックスを切り替えると、変数はデフォルト値の none と pine に戻ります。関数の外で値を保持するようにしたいので、ボックス 1 をオークに切り替えると、元に戻すまでそのままになります。ここでスコープに問題があるような気がしますが、どうすればよいかわかりません。参考までにHTMLを載せておきます。

<select name="material" id="dropdownone" onchange="getMaterial()">
  <option>Pine</option>
  <option>Oak</option>
  <option>Walnut</option>
  <option>Plastic</option>
</select>

<select name="finish" id="dropdowntwo" onchange="getFinish()">
  <option>None</option>
  <option>Finished</option>
</select>

<input type="submit" value="Submit To Cart">


<div id=price>

</div>
4

2 に答える 2

3 
<script>   

     var current_fin = "none";
     var current_mat = "Pine";   


    // Pass the current selection into a variable to use.
    function getMaterial()
    {
        var mat = document.getElementById("dropdownone");
        current_mat = mat.options[mat.selectedIndex].text;
        $("#price").html("Material is: " + current_mat  + "<br/>" +"Finish is: " + current_fin);
    }

    function getFinish()
    {
        var fin = document.getElementById("dropdowntwo");
         current_fin = fin.options[fin.selectedIndex].text;
        $("#price").html("Material is: " + current_mat  + "<br/>" +"Finish is: " + current_fin);
    }

var current_mat関数内に記述すると、 global がオーバーライドされますcurrent_mat。

于 2013-04-09T04:59:21.050 に答える
0 
<!DOCTYPE html>
<html>
<head>

<script>

current_fin = "none";
current_mat = "Pine";

function getMaterial()
{
 var mat = document.getElementById("dropdownone");
 var current_mat = mat.options[mat.selectedIndex].text;
 var fin = document.getElementById("dropdowntwo");
 var current_fin = fin.options[fin.selectedIndex].text;
 document.getElementById("price").innerHTML="Material is: " + current_mat  + "<br/>"   +"Finish is: " + current_fin;
}
function getFinish()
{
var fin = document.getElementById("dropdowntwo");
var current_fin = fin.options[fin.selectedIndex].text;
var mat = document.getElementById("dropdownone");
var current_mat = mat.options[mat.selectedIndex].text;
document.getElementById("price").innerHTML="Material is: " + current_mat  + "<br/>" +"Finish is: " + current_fin;
}


  </script>
  </head>
  <body>

  <select name="material" id="dropdownone" onchange="getMaterial()">
   <option>Pine</option>
   <option>Oak</option>
   <option>Walnut</option>
   <option>Plastic</option>
  </select>

   <select name="finish" id="dropdowntwo" onchange="getFinish()">
      <option>None</option>
      <option>Finished</option>
   </select>

   <input type="submit" value="Submit To Cart">

   <div id="price">

   </div>

    </body>
     </html>
于 2013-04-09T05:24:16.077 に答える