0

保険会社を含むドロップダウンを作成し、保険会社が提供する保険の種類 (たとえば、財産、フリート、モータートレードなど) を示す 2 つ目のドロップダウンを作成するという私のタスクを解決する方法を少し説明しました (提供される保険の種類には数字が含まれます)。ドロップダウンが選択されていると、関連する番号が表示されます。

現時点では、これはhttp://codepen.io/anon/pen/yoEiLの下のいくつかの助けのおかげで私が得た限りです

HTMLは次のとおりです。

<form action="" method="get" class="insurance-numbers">
  <div>
    <select id="company">

    </select>
  </div>
  <div>
    <select id="insurance-type">

    </select>
  </div>
  <div id="insurance-number"></div>
</form>

そして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;
};

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

現時点では、保険会社のリストを正しく表示しています。次に、変更時に選択された会社を選択します。次に、提供する保険の種類を表示する必要があります (提供しないもの (番号のないもの) を無視して、その選択時に div#insurance-number に番号を表示します。

したがって、アリアンツを選択したかどうかを示すために、2 番目のドロップダウンには「プロパティ」と「フリート」が含まれます。ユーザーが「フリート」を選択した場合、番号「0800 587 5858」が div#insurance-number に追加されます。

これが混乱している場合は申し訳ありませんが、これについて本当に助けが必要です。

4

2 に答える 2

2

配列内の各オブジェクトのプロパティに基づいてオプションのドロップダウンを作成する場合はname、次のようにします。

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

使用dropdownして、選択内容を設定します。次に、選択したオプションを使用して、配列内で対応するオブジェクトを走査して見つけます。

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;
};

UPDATEchange : 選択時にイベントを追加する必要がありcompanyます。変更時に、適用findCompany(selectedOption)してから 2 番目の選択を設定しますが、配列を反復する代わりに、次のようにオブジェクト プロパティを多かれ少なかれ反復する必要があります。

var selectedInsurance = findCompany(selectedOption); // selectedOption is the value of the first select 

for (i in selectedInsurance) {
  // here add to your dropdown selectedInsurance[i]
}
于 2013-10-31T22:00:47.490 に答える
0

オブジェクトのプロパティにアクセスするには、次のようなものを使用しますmyArray[index].property

オブジェクト プロパティ 'name' にアクセスするデモを次に示します。

オブジェクト全体を出力する場合は、コンソール ログに置き換え(insurancecompanies[i].name)て表示します。console.log(insurancecompanies[i])

あなたがJavaScriptで要求したように選択メニューを設定するには、以下のDEMOのようなものを使用します

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 foo() {

   select = document.getElementById('foo');

   for (var i=0; i<insurancecompanies.length; i++){
      var opt = document.createElement('option');
      opt.innerHTML = insurancecompanies[i].name;
      select.appendChild(opt);
   }

}

foo();
于 2013-10-31T21:53:26.967 に答える