将键控事件从文本字段更改为下拉列表
Changing a keyup event from a text field to a dropdown
我正在更改文本字段上的keyup事件以引用Rails中的下拉选择。下面是函数调用:
$(document).ready(function(){
$('#survey_q1').keyup(calculate);
$('#survey_q2').keyup(calculate);
$('#survey_q3').keyup(calculate);
$('#survey_q4').keyup(calculate);
$('#survey_q5').keyup(calculate);
$('#survey_q6').keyup(calculate);
});
function calculate(e)
{
// Set each value as they come in
var q1 = parseInt($('#survey_q1').val());
var q2 = parseInt($('#survey_q2').val());
var q3 = parseInt($('#survey_q3').val());
var q4 = parseInt($('#survey_q4').val());
var q5 = parseInt($('#survey_q5').val());
var q6 = parseInt($('#survey_q6').val());
// Don't do the calculation until all values are present
if ( q1 > 0 && q2 > 0 && q3 > 0 && q4 > 0 && q5 > 0 && q6 > 0) {
$('#survey_agent_score').val(
parseFloat((((q2 + q3 + q4 + q5 + q6) + (1.5 * q1)) / 32.5) * 100).toFixed(2)
);
} else {
$('#survey_agent_score').val('');
}
}
以下是更改前的视图:
<table>
<h4>Survey</h4>
<tr>
<td style="vertical-align: top; text-align: right;"><label for="survey_q1">Question 1:</label></td>
<td><input id="survey_q1" name="survey[q1]" style="width:60px;text-align:left;" type="text" class="required" value="<%= survey['q1'] %>" /></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: right;"><label for="survey_q2">Question 2:</label></td>
<td><input id="survey_q2" name="survey[q2]" style="width:60px;text-align:left;" type="text" class="required" value="<%= survey['q2'] %>" /></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: right;"><label for="survey_q3">Question 3:</label></td>
<td><input id="survey_q3" name="survey[q3]" style="width:60px;text-align:left;" type="text" class="required" value="<%= survey['q3'] %>" /></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: right;"><label for="survey_q4">Question 4:</label></td>
<td><input id="survey_q4" name="survey[q4]" style="width:60px;text-align:left;" type="text" class="required" value="<%= survey['q4'] %>" /></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: right;"><label for="survey_q5">Question 5:</label></td>
<td><input id="survey_q5" name="survey[q5]" style="width:60px;text-align:left;" type="text" class="required" value="<%= survey['q5'] %>" /></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: right;"><label for="survey_q6">Question 6:</label></td>
<td><input id="survey_q6" name="survey[q6]" style="width:60px;text-align:left;" type="text" class="required" value="<%= survey['q6'] %>" /></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: right;"><label for="survey_agent_score">Agent Score:</label></td>
<td><input id="survey_agent_score" name="survey[agent_score]" style="width:90px;text-align:left;background-color:#D6D6D6;" type="text" class="required" value="<%= survey['agent_score'] %>" readonly /></td>
</tr>
</table>
以下是我想在视图中将文本字段更改为的代码片段:
<td><%= select_tag "survey[q1]", options_for_select(Call::ANSWERS, @call.survey['q1']), promt: "Please select ..." %></td>
以下是添加 Rails 代码段时呈现的 HTML:
<td style="vertical-align: top; text-align: right;"><label for="survey_q1">Question 1:</label></td>
<td>
<select id="survey_q1" name="survey[q1]" promt="Please select ..."><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
当我在文本字段中输入数值时,它的作用是调用 keyup 事件进行计算。在填写完所有六 (6) 个字段之前,它将在计算文本字段中显示 BLANK。我想将数值的文本输入字段更改为数字下拉列表。我想保留的所有其他功能。
至于节省价值,那里没有问题。该事件确实使用键盘上的向上/向下/输入触发。它只是不从鼠标注册选择。
这是一个工作示例。我修改了您的代码以保持简单。http://jsbin.com/oBoBAp/1/edit
.HTML
<div id="survey">
<select id="q1" name="q1" class="q">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="q2" name="q2" class="q">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id='survey_agent_score' name='survey_agent_score' />
</div>
.JS
function calculate(e)
{
// Set each value as they come in
var q1 = parseInt($('#q1').val());
var q2 = parseInt($('#q2').val());
// Don't do the calculation until all values are present
if ( q1 > 0 && q2 > 0) {
$('#survey_agent_score').val(
parseFloat((((q2) + (1.5 * q1)) / 32.5) * 100).toFixed(2)
);
} else {
$('#survey_agent_score').val('');
}
}
$('#survey').on('change', 'select', calculate);
我在这里找到了答案。
就像在"select_tag"中添加 :onchange 一样简单
<td><%= select_tag "survey[q1]", options_for_select(Call::ANSWERS, @call.survey['q1']), :onchange => 'calculate(survey_q1)' %></td>
这允许我保持我的计算动态并有下拉选择的数字。
相关文章:
- 只有在HTML表单中选择了某个下拉列表时,才需要字段
- Qualtrics(Javascript)-矩阵表-用下拉列表替换文本输入字段
- 根据另一个字段选择获取新值后更新下拉列表内容
- jQuery ui自动完成下拉列表中的两个字段
- 从动态生成的输入字段中获取下拉列表中的数据,而无需保存值 - jquery
- 下拉列表自动填充到页面上的文本(非输入字段)中
- AngularJS单击以编辑下拉列表等字段
- 选择其他字段元素时如何重置选择选项下拉列表
- 选择下拉列表时,按角度中的多个字段排序
- Javascript - 将输入字段的值设置为等于从下拉列表中选择的值
- 引导下拉列表将所选值链接到输入字段
- 是否可以在 Recurly.js v4 中为到期月份和年份的托管字段提供下拉列表而不是文本输入字段
- 创建包含 SQLite 字段内容的 html 下拉列表
- 根据下拉列表中的选定选项选择要隐藏/显示的字段(编辑时)
- 在引导程序标记字段中插入标记后,调用“自动完成”下拉列表
- 当“下拉选择”字段设置为某个值时,清除文本输入字段
- 根据输入字段设置下拉列表值
- 图像下拉选择字段
- 在angularJS中使用输入和下拉过滤字段
- 如何显示/隐藏下拉更改字段