Javascriptで選択した値は、フォームに表示されます

私の選択したオプションの一部が貼られています。Javascriptで選択した値は、フォームに表示されます

私がしようとしているのは、値を追加してフォームに表示するユーザーの選択を表示することです。
私はonclickメソッドで更新したいと思います。ここに行く

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
function calculateCost() 
        { 
         var event_Total = 0; 
         var myForm = document.forms["aaffaForm"]; 
         var sel = document.getElement ('enter code here`ntByTagName("options").length; 
         var aaffa = sel.options [sel.selectedIndex].value; 


          if (sel.checked == '') 
          { 
           alert ('you must'); 
          } 
           else 
            for (i=0; i<= aaffa.length[i];){ 
            event_Total += aaffa; 
            return event_Total; 
            document.getElementById("aaffa_Total").innerHTML = eventTotal; 
            }} 
            </script> 
       </head> 
       <body> 
       <form id='aaffaForm'> 
        <select name="girlsEvent" multiple="multiple" class="girlsEvent" id="aaffaEvents" title="AA Flag Football" onclick="calculateCost()"> 
         <option value="000" name="Select AAFFA Events" selected="selected" id="aaffaEvents0"><strong><strong>AAFFA Events</strong></strong></option> 
         <option value="$45.00" name="All American Flag Football Memebership" onchange="addTotal" id="aaffa1">All American Memebership</option> 

         <option value="$135.00" name="Early Girl's Flag Football Registration"id="aaffaEvents2">Early Girl's Flag Football Registration</option> 

         <option value="$150.00" name="Girl's Flag Football Registration" >All American Memebership</option> 

         <option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option> 

         <option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option> 

         <option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option> 

        </select> 

        <button onclick="myFunction()" >Try It</button> 
      </form> 

     </body> 
    </html>

出典

2016-05-17 HammerTime

可能な複製[JavaScriptを使用して、ドロップダウンリストで選択した値を取得します？]（ http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript） – PhilDulac

：ここ

は、私がここまで持っているコードです。私はselect要素にjavadript addEventLinstenerを使ってclickイベントをアタッチしました。コメントの説明。 jQueryのの

function getSelectValues(sel) { 
 
    var result = []; //result object to store key value pair 
 
    var options = sel && sel.options; //get all the options 
 
    var opt; 
 
    for (var i=0, iLen=options.length; i<iLen; i++) { //iterate through each option 
 
    opt = options[i]; //store the reference 
 
    if (opt.selected) { //check if the option is selected 
 
     result.push({"key":opt.value,"val":opt.text}); 
 
     //store value and text into result object as key value pair 
 
    } 
 
    } 
 
    return result; //return it 
 
} 
 

 
document.getElementById("aaffaEvents").addEventListener("click", function(){ 
 
     var sel = this; //this refers to select element here 
 
     var opts=getSelectValues(sel); //this gets all the selected option from above function 
 
     var html="";//to construct html 
 
     total=0;//store total 
 
     //loop through each options 
 
     opts.forEach(function(currentValue){ 
 
     //currentValue param will have key and value pair 
 
     html+="<div><span>Name = "+currentValue.val+"</span><span> Value = "+currentValue.key+"</span></div>" 
 
     //construct html, change it as per your need 
 
     total+=parseFloat(currentValue.key.split("$")[1]); 
 
     //calculate total and convert to parseFloat 
 
     }) 
 
     html+='<div style="font-weight:bold"> Total = $'+total+'</div>'; 
 
     document.getElementById("result").innerHTML = html; 
 
     //append html to body, change it as per your requirement 
 
});

<form id='aaffaForm'> 
 
    <select name="girlsEvent" multiple="multiple" class="girlsEvent" id="aaffaEvents" title="AA Flag Football"> 
 
     <option value="$45.00" name="Select AAFFA Events" selected="selected" id="aaffaEvents0"><strong><strong>AAFFA Events</strong></strong> 
 
     </option> 
 
     <option value="$45.00" name="All American Flag Football Memebership" id="aaffa1">All American Memebership</option> 
 

 
     <option value="$135.00" name="Early Girl's Flag Football Registration" id="aaffaEvents2">Early Girl's Flag Football Registration</option> 
 

 
     <option value="$150.00" name="Girl's Flag Football Registration">All American Memebership</option> 
 

 
     <option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option> 
 

 
     <option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option> 
 

 
     <option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option> 
 

 
    </select> 
 

 
    <button onclick="myFunction()">Try It</button> 
 
    </form> 
 
<div id="result"></div>

出典

2016-05-17 04:33:59

もう一度お礼を言いたいと思いますそれが本当に助けになりました。私はaddeventlistnerを見つけておらず、セレクト値を保存していたと思います。私は私のフォームにさらに追加するまで待つことができる別の質問があります。 – HammerTime

確かに..あなたはそれを適切な詳細と一緒に追加することができます..ハッピーコーディング.. :) –

使用して容易にし、コードを向上させることができます。あなたはそれを学ぶべきです。あなたのニーズに作ることができる方法を簡単に参照してください：HTML形式に

のJsスクリプト

<script type="text/javascript"> 
     $(document).ready(function(){ 
      var tryit = $('.tryit'); 
      var afa = $('#aaffa_Total'); 
      var select = $('#aaffaEvents'); 

      tryit.click(function(){ 
       var value = select.val(); 
       afa.append(value); 
      }); 
     }); 

    </script>

を

<body> 
    <form id='aaffaForm'> 
     <select name="girlsEvent" multiple="multiple class="girlsEvent" id="aaffaEvents" title="AA Flag Football"> 
        <option value="000" name="Select AAFFA Events" selected="selected" id="aaffaEvents0"><strong><strong>AAFFA Events</strong></strong></option> 
        <option value="$45.00" name="All American Flag Football Memebership" onchange="addTotal" id="aaffa1">All American Memebership</option> 

        <option value="$135.00" name="Early Girl's Flag Football Registration"id="aaffaEvents2">Early Girl's Flag Football Registration</option> 

        <option value="$150.00" name="Girl's Flag Football Registration" >All American Memebership</option> 

        <option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option> 

        <option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option> 

        <option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option> 

       </select> 

     </form> 

     <button class="tryit" >Try It</button> 

     <div id="aaffa_Total">Selected: </div> 
</body>

の

出典

2016-05-17 04:37:12

Javascriptで選択した値は、フォームに表示されます

答えて

関連する問題