使用 Javascript 函数从 HTML 选择表单生成价格
Generating a price from a HTML select form using a Javascript function
我正在为一个网站构建一个报价生成器，表单使用三个下拉框。我刚刚开始了解 JS，所以我需要一些帮助将所选数据从 HTML 传递到 JS 并返回报价。我创建了一个函数，它接受三个参数（服务、卧室、家具），你可以在这里看到： http://jsfiddle.net/alan1986/g3bKV/我确信有一种更简洁的方法可以编写这个函数，这将花费更少的代码。
无论如何，这是我最不担心的，这个功能可能太大了，但至少它可以工作。我一直在研究如何组合表单中的选定选项并将它们传递给函数的答案，我可以看到它如何使用整数工作，但我需要使用字符串。所以这是我一直在使用的一些代码，用于从 HTML 中获取所选选项，然后将结果返回到页面 - 我的问题是如何将此信息链接到函数以返回结果？
function output(){
document.write(document.getElementById("service").value + "</br>");
document.write(document.getElementById("bedrooms").value + "</br>");
document.write(document.getElementById("furnishing").value + "</br>");
var results = document.getElementById("service").value + "<br>" +
document.getElementById("bedrooms").value + "<br>" +
document.getElementById("furnishing").value + "<br>";
document.getElementById("yourOutputDiv").innerHTML = results;
我编写了一个单例，它将onchange事件附加到每个表单元素并在更改时更新 this.data 值。从查看您的代码和 jsfiddle（对我不起作用）来看，这种方法可能没有多大意义。我已经在本地计算机上对此进行了测试，并且可以正常工作
<script>
var quoteMaker = {
data : {
'services':null,
'bedrooms':null,
'furnishing':null,
'quoteString':''
},
servicesListener : function(){
this.data.services = document.getElementById('service').options[document.getElementById('service').selectedIndex].text;
},
bedroomsListener : function(){
this.data.bedrooms = document.getElementById('bedrooms').options[document.getElementById('bedrooms').selectedIndex].text;
},
furnishingListener : function(){
this.data.furnishing = document.getElementById('furnishing').options[document.getElementById('furnishing').selectedIndex].text;
},
changeData : function(divObj){
this.data.quoteString='';
if( divObj.id == 'service' ){
this.servicesListener();
}else if( divObj.id == 'bedrooms' ){
this.bedroomsListener();
}else if( divObj.id == 'furnishing' ){
this.furnishingListener();
}
this.updateQuote();
},
updateQuote : function() {
if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished")
this.data.quoteString = "£70";
if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished")
this.data.quoteString = "£75";
if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished")
this.data.quoteString = "£80";
if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished")
this.data.quoteString = "£85";
if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished")
this.data.quoteString = "£90";
if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished")
this.data.quoteString = "£100";
if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£60";
if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£65";
if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£70";
if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£75";
if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£80";
if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£85";
if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£55";
if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£60";
if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£65";
if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£70";
if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£75";
if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£80";
if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished")
this.data.quoteString = "£50";
if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished")
this.data.quoteString = "£55";
if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished")
this.data.quoteString = "£60";
if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished")
this.data.quoteString = "£65";
if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished")
this.data.quoteString = "£70";
if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished")
this.data.quoteString = "£75";
if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£40";
if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£45";
if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£50";
if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£55";
if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£60";
if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£65";
if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£35";
if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£40";
if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£45";
if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£50";
if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£55";
if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£60";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished")
this.data.quoteString = "£55";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished")
this.data.quoteString = "£60";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished")
this.data.quoteString = "£65";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished")
this.data.quoteString = "£70";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished")
this.data.quoteString = "£75";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished")
this.data.quoteString = "£80";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£45";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£50";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£55";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£60";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£65";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished")
this.data.quoteString = "£70";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£40";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£45";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£50";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£55";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£60";
if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)")
this.data.quoteString = "£65";
document.getElementById("quote").innerHTML=this.data.quoteString;
},
init: function(){
}
}
quoteMaker.init();
</script>
<div id="form">
<p class="lead">Complete the form for an instant quote</p>
<form name="quote-maker" action="">
<p>Select service<br />
<select id="service" name="services" onchange="quoteMaker.changeData(this);">
<option value="Inventory">Inventory</option>
<option value="Check-In">Check-In</option>
<option value="Check-Out">Check-Out</option>
</select></p>
<p class="lead">How many bedrooms does the property have?<br />
<select id="bedrooms" name="bedrooms" onchange="quoteMaker.changeData(this);">
<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>
<option value="5">6+</option>
</select></p>
<p class="lead">Is the property furnished or unfurnished?<br />
<select id="furnishing" name="furnishing" onchange="quoteMaker.changeData(this);">
<option value="1">Furnished</option>
<option value="2">Part Furnished </option>
<option value="3">Unfurnished (except for white goods)</option>
</select></p>
</form>
</div>
<div id="quote"></div>
注意：我清理了你的html。 将所有<select>输入包装在一个表单中
相关文章：
- 根据url填充表单选择下拉列表
- 表单选择不保存在本地存储中
- Javascript - 根据表单选择切换 html5 required=“” 属性
- Dojo表单.选择未正确设置值
- event.preventDefault在表单选择中不起作用
- 自动完成PHP表单选择字段中的用户姓氏
- 电子邮件表单 选择列表菜单
- 单击时更改表单选择选项并选择另一个选项
- 您可以在Google Analytics中存储表单选择吗?
- 表单选择选项动态吸引
- 使用引导下拉按钮作为表单选择框
- 如何在新选项卡中打开表单选择
- 如何使用 JavaScript 访问表单选择标签的 value 属性的内容或其内部文本
- 序列化表单选择器上的对象
- 表单选择 GT 9 时脚本失败
- 具有错误值的表单选择框
- HTML 表单选择与 jQuery 不起作用
- 根据下拉表单选择在另一个页面上加载 Div 中的数据
- PHP HTML 表单选择选项来填充文本字段 jQuery
- 表单选择直接到网页
