最初の選択レコードを変更する

Question

最初の選択に基づいて2番目の選択ボックスにデータを入力するJavaScriptコードがありますが、正しく動作させるためにいくつかの問題があります。

少なくとも2つの値を選択している場合、変更イベントでは次の選択ボックスが正しく表示されますが、変更イベントが発生していないのでオプションが1つしかない場合は、ロードされた値で？

<script type="text/javascript"> 
jQuery(document).ready(function() { 
$("#category").change(function(){ 
var selectedCategory = $("#category option:selected").val(); 
$.ajax({ 
    type: "POST", 
    url: "subcategories.php", 
    data: { category : selectedCategory } 
}).done(function(data){ 
    $("#subcategory").html(data); 
}); 
}); 

}); 
</script> 

は基本的に私のコードは、少なくとも2つのオプションを持っている場合、それが動作します：

<select name="category" class="form-control" id="category"> 
<option value="1">Category 1</option> 
<option value="2">Category 2</option> 
</select> 

Otherwhiseを私は変更イベントをトリガーすることができないので、それが動作しないオプションを1つだけ持っている場合：

<select name="category" class="form-control" id="category"> 
<option value="1">Category 1</option> 
</select> 

選択ボックスで「選択...」のような「ダミー選択オプション」を使用せずに動作させたいです。それを達成する最良の方法は何か。私はそれを正しくするために何時間もかかります。

Answer 1

実際には、選択タグに1つのオプションしかない場合、イベントは変更されません。ドキュメントをロードした直後や変更イベントの直後に関数を呼び出して呼び出します。

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $("#category").change(function(){ 
      getSubCat();//get sub category after change event 
     }); 
     getSubCat();//get sub category after page load 
     function getSubCat(){ 
      var selectedCategory = $("#category option:selected").val(); 
      $.ajax({ 
       type: "POST", 
       url: "subcategories.php", 
       data: { category : selectedCategory } 
      }).done(function(data){ 
       $("#subcategory").html(data); 
      }); 
     } 
    }); 
</script> 

Answer 2

私は解決策を見つけましたが、その最良の方法はわかりません。このオプションに関する懸念を待っています。

基本的に私はコードを2倍にしました。ただ、選択オプションを使用して 変化イベントの一つの、そして他：

<script type="text/javascript"> 
jQuery(document).ready(function() { 

var selectedCategory = $("#category option:selected").val(); 
$.ajax({ 
    type: "POST", 
    url: "subcategories.php", 
    data: { category : selectedCategory } 
}).done(function(data){ 
    $("#subcategory").html(data); 
}); 

$("#category").change(function(){ 
var selectedCategory = $("#category option:selected").val(); 
$.ajax({ 
    type: "POST", 
    url: "subcategories.php", 
    data: { category : selectedCategory } 
}).done(function(data){ 
    $("#subcategory").html(data); 
}); 
}); 

}); 
</script> 

が、これはそれを行うには、適切な方法である、または私は何かを変更する必要がありますか？