1

別のドロップダウン リストの選択に基づいてドロップダウン リストを生成しようとしています。

最初のドロップ ダウン リストの項目のリストが 8 以下の場合、すべて正常に動作しています。

最初のドロップダウン リストに 8 を超える項目のリストを指定すると、コードが機能しません。つまり、2 番目のドロップダウン リストに値が入力されていません。理由はわかりません。

最初のドロップダウン リストの項目数に制限はありますか?

誰でも助けることができます。

これが私のコードです。

<html><body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');
mobiles=new Array('at&t','Dokomo','Sony');
Dals=new Array("Moong","Chana","Ground","nut");
Flours=new Array('Chana','ravva','Gram');
Mixes = new Array('GulabJamun','RavvaDosa', 'DosaMix','IdlyMix');
Rices = new Array('SonaMasoor','PulavRice','PL','Masoor');
Vegetabless = new Array('Doodi','Okra','GreenChili','Beerakaya');


 $(function() {
populateSelect();

  $('#cat').change(function(){
    populateSelect();
});

});


function populateSelect(){
cat=$('#cat').val();
$('#item').html('');


if(cat=='car'){
    cars.forEach(function(t) { 
        $('#item').append('<option>'+t+'</option>');
    });
}

if(cat=='phone'){
    phones.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}

if(cat=='mobile'){
    mobiles.forEach(function(t){
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Dal'){
    Dals.forEach(function(t) { 
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Flour'){
    Flours.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Mix'){
    Mixes.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Rice'){
    Rices.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Vegetables'){
    Vegetabless.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}

} 

</script>
<table id=Groceries><tr><td>
<select name=Category id="cat">
<option value="car">car</option>
<option value="phone">phone</option>
<option value=mobile>Mobile</option>
<option value="Dal">Dal</option>
        <option value = "Flour">Flour</option>
        <option value = "Mix">Mix</option>
        <option value = "Rice">Rice</option>
        <option value = "Vegetables">Vegetables</option>

</select>
</td>
<td><select name=Category id="item">

</select>
</td></tr></table>
<p><input type=button value="Add one more item" onclick="add('Groceries')"></p>
</body></html>

このコードは完全に機能していますが、最初のドロップダウン リストに項目を追加しようとすると、機能しません。正しい問題とその修正方法を教えてください。

  <html><body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');
mobiles=new Array('at&t','Dokomo','Sony');
Dals=new Array("Moong","Chana","Ground","nut");
Flours=new Array('Chana','ravva','Gram');
Mixes = new Array('GulabJamun','RavvaDosa', 'DosaMix','IdlyMix');
Rices = new Array('SonaMasoor','PulavRice','PL','Masoor');
Vegetabless = new Array('Doodi','Okra','GreenChili','Beerakaya');
Leafy-vegs = new Array('Spinach','Coriyander','Methi');
Non-vegs = new Array('Chicken','Mutton','Fish');
Sweetss = new Array('Rasagula','Rasamalayi','Kova');
Snackss = new Array('Samosa','MirchiBajji','Chakli');
Frozen-vegs = new Array('DrumSticks','Akakarakaya','Mullangi');
Frozen-sweetss = new Array('Rasamalayi','Gulabjamun','Kova');




 $(function() {
populateSelect();

  $('#cat').change(function(){
    populateSelect();
});

});


function populateSelect(){
cat=$('#cat').val();
$('#item').html('');


if(cat=='car'){
    cars.forEach(function(t) { 
        $('#item').append('<option>'+t+'</option>');
    });
}

if(cat=='phone'){
    phones.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}

if(cat=='mobile'){
    mobiles.forEach(function(t){
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Dal'){
    Dals.forEach(function(t) { 
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Flour'){
    Flours.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Mix'){
    Mixes.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Rice'){
    Rices.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}
if(cat=='Vegetables'){
    Vegetabless.forEach(function(t) {
        $('#item').append('<option>'+t+'</option>');
    });
}
      if(cat=='Leafy-veg'){
      Leafy-vegs.forEach(function(t) {
          $('#item').append('<option>'+t+'</option>');
      });
  }
  if(cat=='Non-veg'){
      Non-vegs.forEach(function(t) {
          $('#item').append('<option>'+t+'</option>');
      });
  }
  if(cat=='Sweets'){
      Sweetss.forEach(function(t) {
          $('#item').append('<option>'+t+'</option>');
      });
  }
  if(cat=='Snacks'){
      Snackss.forEach(function(t) {
          $('#item').append('<option>'+t+'</option>');
      });
  }
  if(cat=='Frozen-veg'){
      Frozen-vegs.forEach(function(t) {
          $('#item').append('<option>'+t+'</option>');
      });
  }
  if(cat=='Frozen-sweets'){
      Frozen-sweetss.forEach(function(t) {
          $('#item').append('<option>'+t+'</option>');
      });
  }


} 

</script>
<table id=Groceries><tr><td>
<select name=Category id="cat">
<option value="car">car</option>
<option value="phone">phone</option>
<option value=mobile>Mobile</option>
<option value="Dal">Dal</option>
<option value = "Flour">Flour</option>
        <option value = "Mix">Mix</option>
        <option value = "Rice">Rice</option>
        <option value = "Vegetables">Vegetables</option>
<option value = "Leafy-veg">Leafy-veg</option>
       <option value = "Non-veg">Non-veg</option>
        <option value = "Sweets">Sweets</option>
        <option value = "Snacks">Snacks</option>
        <option value = "Frozen-veg">Frozen-veg</option>
        <option value = "Frozen-sweets">Frozen-sweets</option>

</select>
</td>
<td><select name=Category id="item">

</select>
</td></tr></table>
<p><input type=button value="Add one more item" onclick="add('Groceries')"></p>
</body></html>
4

1 に答える 1

1 
Leafy-vegs = new Array('Spinach','Coriyander','Methi');

これは無効な構文です。それは次のようなものでなければなりません

leafyVegs = new Array('Spinach','Coriyander','Methi');

変数名にハイフンを含めることはできません。

ただし、これに対するより簡単なアプローチは、連想配列を使用することです。

items = {
    cars: ["Mercedes","Volvo","BMW","porche"],
    phones: ['Samsung','Nokia','Iphone'],
    // etc. insert your stuff here
    // you can use dashes in these, just use string literals, like this:
    'leafy-vegs': ['Spinach','Coriyander','Methi'],
    // you can even use spaces
    'frozen vegs': ['DrumSticks','Akakarakaya','Mullangi']
}

そして、その巨大なifs 行を次のように置き換えます。

items[cat + 's'].forEach(function(t) {
    $('#item').append('<option>'+t+'</option>');
});

option変数名がs の後に「s」が付いている理由がわかりません... を使用しなかった場合sは、cat + 's'.

于 2013-09-28T22:36:47.937 に答える