0

我稍微完成了创建包含保险公司的下拉列表的任务，然后是第二个下拉列表，显示保险公司提供的保险类型，例如财产、车队或汽车贸易（提供的保险类型包括一个数字）。）一旦两者都选择已选择的下拉菜单显示相关数字。

目前这是我所拥有的http://jsfiddle.net/3MK3D/

继承人的HTML：

<form action="" method="get" class="insurance-numbers">
  <div>
    <select id="company">
      <option value="default-company">Choose a company</option>
    </select>
  </div>
  <div>
    <select id="insurance-type">
      <option value="default-type">Choose an insurance type</option>
    </select>
  </div>
  <div id="insurance-number"></div>
</form>

CSS：

#insurance-type {
  display:none;
}

和 Javascript：

        var insurancecompanies = [
      { 
        name : 'Advent', 
        property : '01242 674 674', 
        fleet : '', 
        motortrade : ''
      },
      {   name : 'Allianz', 
       property : '0844 412 9988', 
       fleet : '0800 587 5858', 
       motortrade : '' 
      },
      {   name : 'Aviva', 
       property : '0800 015 1498', 
       fleet : '0800 246 876', 
       motortrade : '0800 246 876'
      },
      {   name : 'AXA', 
       property : '0870 900 0867', 
       fleet : '0870 900 0860', 
       motortrade : '0870 900 1753'
      },
      {   name : 'Catlin', 
       property : '', 
       fleet : '0800 066 5364', 
       motortrade : ''
      },
      {   name : 'Chartis', 
       property : '', 
       fleet : '0844 477 6544', 
       motortrade : ''
      },
      {   name : 'Clegg Gifford', 
       property : '', 
       fleet : '', 
       motortrade : '01708 729 529'
      },
      {   name : 'Equity Red Star', 
       property : '', 
       fleet : '0845 609 1235', 
       motortrade : ''
      },
      {   name : 'Highway/LV', 
       property : '', 
       fleet : '0845 373 1244', 
       motortrade : ''
      },
      {   name : 'NIG', 
       property : '', 
       fleet : '0845 300 4644', 
       motortrade : '0845 300 4644'
      },
      {   name : 'QBE', 
       property : '', 
       fleet : '01245 272 700', 
       motortrade : ''
      },
      {   name : 'Royal Sun Alliance', 
       property : '0845 077 0120', 
       fleet : '0845 675 0404', 
       motortrade : '0845 077 0119' 
      },
      {   name : 'Summit', 
       property : '', 
       fleet : '01254 396 655', 
       motortrade : ''
      },
      {   name : 'Zurich', 
       property : '0845 300 2055', 
       fleet : '0800 300 2055', 
       motortrade : ''
      }
    ];


    function findCompany(name) {
      var i = 0, len = insurancecompanies.length;
      for (i; i < len; i += 1) {
        if (insurancecompanies[i].name === name) {
          return insurancecompanies[i];
        }
      }
      return null;
    };

    function addInsuranceType(type) {
      if (type !== '') {
        $("#insurance-type").append('<option val="' + type + '">' + type + '</option>');
      }
    }

    var dropdown = [], i = 0, len = insurancecompanies.length;
    for (i; i < len; i += 1) {
      dropdown.push(insurancecompanies[i].name);
    }

    $.each( dropdown, function( i, val ) {
      $("#company").append( "<option val=\""+ val +"\">" + val + "</option>" );
    });

    $('#company').on('change', function() {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    if(valueSelected !== 'default-company') {
      $('#insurance-type').children().remove();
      $('#insurance-number').text('');
      var selectedInsurance = findCompany(valueSelected);
      addInsuranceType(selectedInsurance.property, 'Property');
      addInsuranceType(selectedInsurance.fleet, 'Fleet');
      addInsuranceType(selectedInsurance.motortrade, 'motor trade');
      $('#insurance-type').fadeIn();
    } else {
      $('#insurance-type').fadeOut();
      $('#insurance-number').fadeOut();
    }
});

$('#insurance-type').on('change', function() {
   var optionSelected = $("option:selected", this);
   var insuranceSelected = this.value;
  $('#insurance-number').text(insuranceSelected);
  $('#insurance-number').fadeIn();
});

目前它正确显示保险公司的名单。然后它选择更改时选择的公司。然后它显示保险公司提供的数字，我需要它显示这些数字的键名，然后输出取决于所选键（选择）的数字。

因此，如果我选择 Allianz，第二个下拉列表将包含“property”和“fleet”。如果用户选择“fleet”，数字“0800 587 5858”将被附加到 div#insurance-number'。

抱歉，如果这令人困惑，我真的需要一些帮助，仅此而已。

4

1 回答 1

1

这里的逻辑似乎有点奇怪。该findCompany()函数似乎打算返回一条记录：

function findCompany(name) {
  var i = 0, len = insurancecompanies.length;
  for (i; i < len; i += 1) {
    if (insurancecompanies[i].name === name) {
      return insurancecompanies[i];
    }
  }
  return null;
};

但是，函数的结果被视为数组：

var selectedInsurance = findCompany(valueSelected);
for (i in selectedInsurance) {
  $("#insurance-type").append( "<option val=\""+ selectedInsurance[i] +"\">" + selectedInsurance[i] + "</option>" );
}

如果selectedInsurance只是insurancecompanies数组中的一个对象的一个​​实例，那么您可能要做的不是尝试循环遍历该对象，而是测试该对象上的属性以添加到select. 也许是这样的：

var selectedInsurance = findCompany(valueSelected);
if (selectedInsurance.property !== '') {
  $("#insurance-type").append('<option val="' + selectedInsurance.property + '">' + selectedInsurance.property + '</option>');
}
if (selectedInsurance.fleet !== '') {
  $("#insurance-type").append('<option val="' + selectedInsurance.fleet + '">' + selectedInsurance.fleet + '</option>');
}
if (selectedInsurance.motortrade !== '') {
  $("#insurance-type").append('<option val="' + selectedInsurance.motortrade + '">' + selectedInsurance.motortrade + '</option>');
}

这也许不是最优雅的解决方案，但至少应该让您入门。看到这样的重复代码通常表明可以抽象一些功能。也许是一个常见的功能：

function addInsuranceType(type) {
  if (type !== '') {
    $("#insurance-type").append('<option val="' + type + '">' + type + '</option>');
  }
}

然后你可以调用它三遍：

var selectedInsurance = findCompany(valueSelected);
addInsuranceType(selectedInsurance.property);
addInsuranceType(selectedInsurance.fleet);
addInsuranceType(selectedInsurance.motortrade);

编辑：根据您的评论（我想我在问题中忽略了一些内容），看起来您希望第二个select具有数据的值，但显示数据的名称。对于我的第一个版本，这将是这样的：

if (selectedInsurance.property !== '') {
  $("#insurance-type").append('<option val="' + selectedInsurance.property + '">property</option>');
}
// ... and so on for the other two

请注意，我仅将selectedInsurance对象用于option值，而不是用于其文本。对于文本，我只是直接使用字符串“property”。

如果您在我的第二个版本中使用该函数，一个简单的方法也可能是将显示文本传递给它：

function addInsuranceType(value, text) {
  if (value !== '') {
    $("#insurance-type").append('<option val="' + value + '">' + text + '</option>');
  }
}

然后你可以调用它三遍：

var selectedInsurance = findCompany(valueSelected);
addInsuranceType(selectedInsurance.property, 'property');
// ... and so on for the other two

您也许可以更巧妙地使用 JavaScript 对象，以避免在其中重复术语“属性”。像这样的东西：

function addInsuranceType(object, type) {
  if (object[type] !== '') {
    $("#insurance-type").append('<option val="' + object[type] + '">' + type + '</option>');
  }
}

然后你可以调用它三遍：

var selectedInsurance = findCompany(valueSelected);
addInsuranceType(selectedInsurance, 'property');
// ... and so on for the other two

这利用了 JavaScript 中的对象成员可以作为对象的元素进行索引的事实。尽管在某些情况下，它可能会导致在可读性和可支持性之间进行权衡，因此请仅在意图明确的情况下使用它。

于 2013-11-03T10:45:04.613 回答