Javascript 选择要在表单上显示的值

Question

我无法使用我的 select 选项部分的表单。

我想做的是显示用户的 selection 添加其值并将其显示在表单上。
我想通过 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=".00" name="All American Flag Football Memebership" onchange="addTotal" id="aaffa1">All American Memebership</option>

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

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

                        <option value=".00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>

                        <option value=".00" name="Mini Camp Registration Girls">Mini Camp Registration</option>

                        <option value=".00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option>

                    </select>

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

        </body>
   </html>

Answer 1

给你。我已使用 javascript addEventLinstener 将点击事件附加到 select 元素。在评论中解释。

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=".00" name="Select AAFFA Events" selected="selected" id="aaffaEvents0"><strong><strong>AAFFA Events</strong></strong>
      </option>
      <option value=".00" name="All American Flag Football Memebership" id="aaffa1">All American Memebership</option>

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

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

      <option value=".00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>

      <option value=".00" name="Mini Camp Registration Girls">Mini Camp Registration</option>

      <option value=".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>

Answer 2

使用jQuery可以简化和改进代码。你应该尝试学习它。看看您能轻松满足您的需求：

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>

Html

   <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=".00" name="All American Flag Football Memebership" onchange="addTotal" id="aaffa1">All American Memebership</option>

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

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

                    <option value=".00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>

                    <option value=".00" name="Mini Camp Registration Girls">Mini Camp Registration</option>

                    <option value=".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>

Javascript 选择要在表单上显示的值

Javascript selected value to display on form

javascript

select

options