如何使用jquery引用多选下拉和文本框来计算值 [英] how to calculate values with the refrence to multi select drop down and textbox using jquery
问题描述
我有一个HTML表单，其中
1多选下拉列表：用户选择name_of_employee的地方。
1 Textbox：用户输入总价格的地方。
在文本框中输入总价后，应该发生一个小的计算，其结果应显示在第三个动态生成的文本框中。
计算结果为：
result = {total_price_entered_in_textbox / total_option_selected_from_Selectbox}
I have a html form having-
1 multi select dropdown :Where users select the name_of_employee.
1 Textbox : Where users enter the Total price.
After entering the total price in textbox, one small calculation should happen and its result should be shown in third dynamically generated textbox.
Calculation will Be:
result={ total_price_entered_in_textbox / total_option_selected_from_Selectbox}
我的问题是我如何做这个计算并在动态创建的文本框中显示其结果。 （请在下面运行我的代码）。
简单地说，我正在实施从Multiselect下拉菜单中将所有选定员工的所有员工的潜在总额下降。
My problem is that "how can i do this calculation and show its result in the dynamically created textbox?". (Please run my code below). In simple i am implementing "Diving total amounts in the equal parts to all the selected employee from Multiselect drop down."
<!DOCTYPE html>
<html>
<head>
<style>#multiple{
margin-bottom:10px;
border:1px solid #333;
background:#efefef;
color:#000;
}
#result input{
margin-left:5px;
border:1px solid #333;
background:#a4c4f4;
margin-top:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body align="center">
<form id="frm">
<select id="multiple" multiple="multiple" style="width: 120px;height: 120px;">
<option value="1" >
Ashutosh
</option>
<option value="6">
Jems Bond
</option>
<option value="7">
Danial Crack
</option>
<option value="8">
Dan Brown
</option>
<option value="9">
Angilina Jolly
</option>
</select>
<br/>
<input type="text" id="target" name="total_price" size="13" id="" style="background-color:orange;font-size: 22px;color: blue"/> <!--User will enter the total_price in this textbox -->
<div id="result">
</div>
</form>
<script>
$(function()
{
$("#multiple").change(function()
{
var multipleValues = $("#multiple").val() || "";
var result = "";
if (multipleValues != "") {
var aVal = multipleValues.toString().split(",");
var count = $("#multiple :selected").length;
$('#target').keyup(function()
{
var price = $(this).val();
var price_per_head= price/count ;
alert("result="+price_per_head)
});
$.each(aVal, function(i, value) {
result += "<div>";
result += "<input type='text' name='opval" + (parseInt(i) + 1) + "' value='" + value.trim() + "'>";
result += "<input type='text' name='optext" + (parseInt(i) + 1) + "' value='" + $("#multiple").find("option[value=" + value + "]").text().trim() + "'>";
result += "<input type='text' name='option" + (parseInt(i) + 1) + "' value='' '>";
result += "</div>";
});
}
//Set Result
$("#result").html(result);
});
});
calculator = function()
{
//I would select it by once the user has selected it, add a active class to it
var firstDropdown = $('#drop.active') .val(),
price = $('textarea').val(),
result = firstDropdown / price;
//I'd then have a container that would hold the dynamic textarea
$('#container').html('<textarea class="eval">' + result + '</textarea>')
};
</script>
</body>
</html>
希望有人会帮助我。
感谢您
-Ashutosh
Thanking you -Ashutosh
推荐答案
工作演示： http://codebins.com/bin/4ldqp7a/2
JS
$(function() {
$("#multiple").change(function() {
var multipleValues = $("#multiple").val() || "";
var result = "";
if (multipleValues != "") {
var aVal = multipleValues.toString().split(",");
var count = $("#multiple :selected").length;
$.each(aVal, function(i, value) {
result += "<div>";
result += "<input type='text' name='opval" + (parseInt(i) + 1) + "' value='" + value.trim() + "'>";
result += "<input type='text' name='optext" + (parseInt(i) + 1) + "' value='" + $("#multiple").find("option[value=" + value + "]").text().trim() + "'>";
result += "<input type='text' name='option" + (parseInt(i) + 1) + "' value='' '>";//result should display in this textbox .i.e (result= total_price/count )
result += "</div>";
alert("Number of selected Names="+count);
});
}
//Set Result
$("#result").html(result);
});
$("#toal_price").blur(function(){
var multipleValues = $("#multiple").val() || "";
var total_price = $("#toal_price").val();
var aVal = multipleValues.toString().split(",");
var count = $("#multiple :selected").length;
if (multipleValues != "") {
$.each(aVal, function(i, value) {
var price = total_price / count;
$("input[name=option"+(parseInt(i) + 1)+"]").val(price);
});
}
});
});
HTML
<form id="frm">
<select id="multiple" multiple="multiple" style="width: 120px;height: 120px;">
<option value="1" >
Ashutosh
</option>
<option value="6">
Jems Bond
</option>
<option value="7">
Danial Crack
</option>
<option value="8">
Dan Brown
</option>
<option value="9">
Angilina Jolly
</option>
</select>
<br/>
<input type="text" id="toal_price" name="total_price" size="13" id="" style="background-color:orange;font-size: 22px;color: blue"/> <!--User will enter the total_price in this textbox -->
<div id="result">
</div>
</form>
这篇关于如何使用jquery引用多选下拉和文本框来计算值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
