Заполнение поля со списком после выбора из другого combox

Question

У меня есть два поля со списком, первое поле со списком заполняется из базы данных, затем, когда я выбираю вариант из него (onchange), он заполняет второй поле со списком, он отлично работает, если первый комбинированный блок имеет более одного значения, но он не работает, если в первом поле со списком есть только один вариант, может ли кто-нибудь помочь мне, почему это происходит?

<div> 
    <label class="arrow-right"> Category Name</label><br> 
    <select class="SelectStyle" style="width:95%;border:0;" name="CategoryName" id="CategoryName" onchange="GetOrderProduct(this.options[this.selectedIndex].innerHTML)"> 
     <option value="">Select Category Name</option> 
    </select> 
</div> 
<div> 
    <label class="arrow-right"> Category Type</label> 
</div> 
<div> 
    <select class="SelectStyle" style="width:95%;border:0;" name="CategoryType" id="CategoryType" > 
     <option value="">Select Category Type</option> 
    </select> 
</div> 

код Javascript:

function GetOrderProduct(val) 
{ 
    var sel=document.getElementById("OrderId"); 
    var OrdID = sel.options[sel.selectedIndex].text; 

    $.ajax({ 
     type:"POST", 
     url:"get_OrderProducts.php", 
     data:{ 
      'CatName': val, 
      'OrderID':OrdID 
     }, 
     success: function(data){ 

      $("#CategoryType").html(data); 
     } 
    }) 
} 

Answer 1

Это потому, что только один вариант в выпадающем списке, вы не можете изменить выбранный элемент, поэтому onchange событие не срабатывает. Вы можете настроить элемент, чтобы иметь событие click, а также событие change, но это, скорее всего, станет раздражающим и приведет к задержкам с производительностью.

Суть в том, что только с одним элементом вам придется запускать код другим способом в другое время.