Javascript 选择的值显示在表单上答案

【问题标题】：Javascript selected value to display on formJavascript 选择的值显示在表单上
【发布时间】：2016-05-17 03:45:58
【问题描述】：

我被表单中的选择选项卡住了。

我想要做的是显示用户的选择，添加其值并将其显示在表单上。
我想通过 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>

【问题讨论】：

Get selected value in dropdown list using JavaScript?的可能重复

标签： javascript select options

【解决方案1】：

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

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>

【讨论】：

我想再次感谢你们，你们真的很有帮助。我想我错过了 addeventlistner 并存储了选择值。我还有一个问题可以等到我在表单中添加更多内容。
当然..您可以在 SO 中添加适当的详细信息.. 快乐编码.. :)

【解决方案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="$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>

【讨论】：