Блог

 <select style="width:300px;" id="FirstDD" name="userListingCategory" onchange="FillSelectTwo(this.options[this.selectedIndex].value)">
                      <option  disabled="disabled">Category...</option>
                      <?php while($row = $sth2->fetch(PDO::FETCH_ASSOC))
                      {echo "<option value=". $row['catID'] . ">" .$row['catName']."</option>";}
                    unset($sth2);
            $selectedOptionInCategory = $row['catID'];
                    ?>

                </select> 
                 <select style="width:340px;" id="SecDD" name="userListingSCategory">
                   <option  disabled="disabled">Sub-Category...</option>      
                <?php while($row = $sth3->fetch(PDO::FETCH_ASSOC))
                      {echo "<option value=". $row['scatID'] . ">" .$row['scatName']."</option>";}
                    unset($sth3);
                 ?>
  

Когда выбрана «категория», например:

Я хочу subcategories , чтобы отображались связанные с этим первым category выбранным.

Я запускаю следующий SQL:

     SELECT scatID, scatName 
FROM Category C, SubCategory SC
WHERE C.catID = SC.catID 
AND C.catID = '$selectedOptionInCategory'
  

JS:

 function FillSelectTwo(id) {  //what is this id for?  
    $.ajax({
        url: 'index.php',
        dataType: 'text',
        success: function(data) {           
         $('#SecDD').find('option').remove().end().append(data);
        },
        error:function(jxhr){
         console.log(jxhr.responseText);        
        }
    });
}
  

Проблема, которую я получаю
Когда я тестирую этот код, я выбрал category like Baby, затем subcategory поле очищает первое значение параметра ‘disabled’, но затем его пустой набор оттуда, и я не могу выбрать ни одно из значений, которые SQL вернутся при выборе a category .

Как это выглядит:

javascript должен быть в порядке, но я сомневаюсь, что вызов ajax выполняется в первую очередь

смотрите в firebug или инструментах разработчика (для Chrome), чтобы подтвердить, что вызов ajax выполняется для index.php

также удалите параметры в успешном обратном вызове, чтобы в случае сбоя ajax select они оставались нетронутыми и выполняли обратный вызов ошибки для отслеживания ошибок

  function FillSelectTwo(id) {  //what is this id for?  
    $.ajax({
        url: 'index.php',
        dataType: 'text',
        success: function(data) {           
         $('#SecDD').find('option').remove().end().append(data);
        },
        error:function(jxhr){
         console.log(jxhr.responseText);        
        }
    });
}
  

PS ' возможно, проблема в том, что отсутствует в конце вашего URL-адреса

Это довольно просто…

Сначала вам нужно создать PHP-функцию, которая возвращает вложенные символы. Я часто делаю ajax.php досье. В этом у меня есть разные функции, которые вызываются в diffs. $_GET.

Средство просмотра PHP для получения результата.

 switch($_GET['ajax'])
{
   case 'subcats' :
   $sql = [YOUR SQL QUERY];
   if(mysql_num_rows($sql)!=0)
   {
    echo "[";
    $i = 0;
    while($r = mysql_fetch_array($sql))
    {
       if($i!=0)
       {echo ',';}
       echo "['$r[scatID]','$r[ScatName]']";
    }
    echo ']';
   }
   break;
}
  

jQuery для запроса ajax

 $.post("ajax.php?ajax=subcats",'id=' $("#FirstDD").val(), function(result){
var print = '';
if(result)
{
for(i = 0;i<result.length; i  )
{
  var current = result[i];
  print  = '<option value="'  current[0]  '">'  current[1]  '</option>';
}
$('#SecDD').html(print);
$('#SecDD').removeAttr('disabled');
}
});
  

Это могут быть некоторые ошибки (записи ondemand — не моя сильная сторона ^ _^), Но попробуйте внедрить это в свой скрипт. И прокомментируйте, если вы встретите какие-либо ошибки…

**

Редактировать

**

Но в вашем случае, когда я теперь это понимаю. В элементе subcats options добавьте attr. rel, в котором вы пишете родительский идентификатор. После слов вы добавляете этот код jQuery:

 $('#FirstDD').change(function(){
var thisId = $(this).attr('id');
$('#SecDD option').addAttr('disabled','disabled');
$('#SecDD option[rel="' thisId '"]').removeAttr('disabled');
});