我有一個html表格 -
1多選下拉菜單:用戶選擇name_of_employee。
1文本框:用戶輸入總價格。
在文本框中輸入總價後,應該發生一個小的計算,其結果應顯示在第三個動態生成的文本框中。
計算將是:
結果= {total_price_entered_in_textbox/total_option_selected_from_Selectbox}如何計算值與多選擇下拉列表和文本框使用jquery
我的問題是,「我怎麼可以這樣計算並顯示其在動態創建的文本結果?」。 (請在下面運行我的代碼)。 簡而言之,我正在實施「從Multiselect下拉菜單中將所有選定員工的所有員工的平等部分潛水總額」。
<!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
謝謝先生。現在我非常感興趣學習Jquery。 –
出現了一個新的疑問。我想對生成的文本框進行動態驗證。這樣,所有動態生成的文本框的總和應該等於total_price(靜態文本框)的值。 –
我在這裏發佈了我的新疑問。 http://stackoverflow.com/questions/12471823/how-to-validate-dynamically-generated-textbox-with-reference-to-another-textbox請幫我先生。 –