1

我正在为一个网站构建一个报价生成器，该表单使用三个下拉框。我刚刚开始了解 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;
4

1 回答 1

1

我编写了一个单例，将一个事件附加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>在一个表单中

于 2013-10-04T14:53:35.287 回答