我的代码似乎在Chrome/IE/Firefox上工作，但当涉及到Safari时，我得到一个错误(见下文)。我使用Safari 8.0.8。
我试图把选择选项的值加起来，一旦选择并创建一个总数。当然，总数会随变化而变化。我知道这似乎是在创建global var然后尝试使用safari访问它时，但我似乎无法让它工作。
该解决方案也必须适用于移动设备，因为它是为移动设备构建的，但也不适用于iPhone。我使用JQuery和JQuery Mobile。
有别的方法吗?我可以简化JQuery(将有30个选择可供选择，我需要这个smaller和更多的efficient)?
:
ReferenceError: Can't find variable: previous
:
$('#select-choice-timely').on('click', function () {
previous = this.value;
}).change(function () {
var a = $('#fr-total').html();
var ab = parseInt(a, 10) - parseInt(previous, 10);
var b = $(this).val();
var c = parseInt(ab, 10) + parseInt(b, 10);
$('#fr-total').html(c);
});<html class=""><head><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/JamieSterling/pen/QjyxGz">
<link rel="stylesheet prefetch" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<style class="cp-pen-styles"></style></head><body>
<div data-role="page" id="page-site-data">
<div data-role="panel" data-display="push" id="mypanel" data-theme="b">
<div class="user">
<h3>Dave Smith</h3>
<p><a href="/" class="">Logout</a></p>
</div>
<ul id="menu-panel" class="ui-listview ui-listview-b" data-role="listview">
<li class=""><a href="/home.html" class="ui-link ui-btn ui-btn-icon-left ui-icon-home">Home</a></li>
<li class=""><a href="#page-2" class="ui-link ui-btn">High performance finance</a></li>
<li class=""><a href="#page-3" class="ui-link ui-btn">Peer review</a></li>
<li class=""><a href="#page-4" class="ui-link ui-btn">Tools</a></li>
<li class=""><a href="#page-5" class="ui-link ui-btn">Diary</a></li>
<li class=""><a href="#page-6" class="ui-link ui-btn">Blog</a></li>
</ul>
</div>
<!-- /panel -->
<div data-role="header">
<h1>Business Unit</h1>
<a href="/site-1.html" class="ui-btn-left ui-btn-icon-notext ui-icon-hotback" data-role="none" data-icon="hotback" data-iconpos="left" role="button">Back</a>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<h2>Add Performance Data</h2>
<form id="add-data-1">
<fieldset data-role="collapsible" data-iconpos="right" data-collapsed="false" id="fr">
<legend>Financial Reporting</legend>
<div class="ui-field-contain" id="timely-report">
<label for="select-choice-timely" class="select">Timely Report</label>
<select name="select-choice-timely" id="select-choice-timely" data-mini="true" data-inline="true">
<option value="1">Basic</option>
<option value="2">Developed</option>
<option value="3">Advanced</option>
<option value="4">High Performance</option>
<option value="5">World Class</option>
</select>
</div>
<div class="ui-field-contain">
<label for="select-choice-accurate" class="select">Accurate Reporting</label>
<select name="select-choice-accurate" id="select-choice-accurate" data-mini="true" data-inline="true">
<option value="1">Basic</option>
<option value="2">Developed</option>
<option value="3">Advanced</option>
<option value="4">High Performance</option>
<option value="5">World Class</option>
</select>
</div>
<div class="ui-field-contain">
<label for="select-choice-efficient" class="select">Efficient Processes</label>
<select name="select-choice-efficient" id="select-choice-efficient" data-mini="true" data-inline="true">
<option value="1">Basic</option>
<option value="2">Developed</option>
<option value="3">Advanced</option>
<option value="4">High Performance</option>
<option value="5">World Class</option>
</select>
</div>
<div class="ui-field-contain">
<label for="select-choice-harmonised" class="select">Harmonised & Flexible</label>
<select name="select-choice-harmonised" id="select-choice-harmonised" data-mini="true" data-inline="true">
<option value="1">Basic</option>
<option value="2">Developed</option>
<option value="3">Advanced</option>
<option value="4">High Performance</option>
<option value="5">World Class</option>
</select>
</div>
<div class="ui-field-contain">
<label for="select-choice-measured" class="select">Measured & Monitored Performance</label>
<select name="select-choice-measured" id="select-choice-measured" data-mini="true" data-inline="true">
<option value="1">Basic</option>
<option value="2">Developed</option>
<option value="3">Advanced</option>
<option value="4">High Performance</option>
<option value="5">World Class</option>
</select>
</div>
<div class="ui-field-contain">
<label for="select-choice-fr-total">Total</label>
<div id="fr-total">5</div>
</div>
</fieldset>
<button type="submit" id="submit-1" class="ui-shadow ui-btn ui-corner-all">Submit Data</button>
</form>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body></html>:
Codepen
在Safari中，change在click之前触发，因此previous在change -回调中未定义。
不同的方法:
$("#select-choice-timely").change(function() {
var a = $("#fr-total").html();
var ab = parseInt(a, 10) - parseInt($(this).prop('previous'), 10);
var b = $(this).val();
var c = parseInt(ab, 10) + parseInt(b, 10);
$("#fr-total").html(c);
$(this).prop('previous',this.value)
}).prop('previous',function(){return this.value});