Selectbox изменить содержимое с помощью jQuery/AJAX

Question

Я пытаюсь найти лучшее решение для этого: у меня будут категории, подкатегории, подкатегории и т. Д., И мне нужно иметь его в разных selectboxes. Пример: Сначала будет:

<select> 
    <option value="cars">Cars</option> 
    <option value="electronic">Electronic</option> 
    <option value="garden">Garden</option> 
</select> 

После этого, когда пользователь может выбрать, например, автомобили этого выберите изменения ящик для

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

Концепции страницы только один ящик в середине страницы и после того, как вы выбираете первая категория эта коробка исчезнет, ​​и появится новая коробка с подкатегорией. Какое лучшее решение для этого и как сделать это в AJAX?

Answer 1

Я просто написал эту JSFIDDLE: http://jsfiddle.net/thauwa/xGFQN/

В принципе, то, что вам нужно сделать, это использовать код вроде этого:

HTML

<select id="optionsSet1" class="justAnotherDropdown"> 
    <option value=""></option> 
    <option value="cars">Cars</option> 
    <option value="electronic">Electronic</option> 
    <option value="garden">Garden</option> 
</select> 
<select id="optionsSet2" class="justAnotherDropdown"></select> 
<select id="optionsSet3" class="justAnotherDropdown"></select> 
<select id="optionsSet4" class="justAnotherDropdown"></select> 

JQuery

$(".justAnotherDropdown").not($(".justAnotherDropdown").first()).hide(); // Hide everything but the first of the <select> tags 
$(".justAnotherDropdown").change(function() { // The jQuery event handler. 
    var changedID = $(this).attr('id'); 
    var prefixID = changedID.slice(0, -1); 
    var nextIDNumber = parseInt(changedID.substr(changedID.length - 1)) + 1; 
    var nextID = prefixID + nextIDNumber; 
    var nextOptionsSet = "optionsSet" + nextIDNumber; 
    $.ajax({ 
     url: 'yourPHPpage.php', // Change this to your PHP script's actual path. 
     data: { 
      value: $(this).val(), // Uncomment this line when using with PHP. 
      id: changedID, // Uncomment this line when using with PHP. 
     }, 
     type: "POST", 
     success: function (response) { 
      $("#" + changedID).hide(); // Hide the previous box. 
      $("#" + nextID).html(response).show("slow"); // Drammatically show the next. 
     } 
    }); 
}); 

PHP

$selectedItem = $_POST['id']; 
    $selectedItemValue = $_POST['value']; 
    switch ($selectedItem) { 
     case 'optionsSet2': 
      switch ($selectedItemValue) { 
       case 'Cars': 
        echo 'HTML to display the relevant `options`, properly escaped.'; 
        break; 
       case 'Electronic': 
        echo 'HTML to display the relevant `options`, properly escaped.'; 
        break; 
       case 'Garden': 
        echo 'HTML to display the relevant `options`, properly escaped.'; 
        break; 
      } 
      break; 
     case 'optionsSet3': 
      /** Add more code here. **/ 
    } 
/** This method is very inefficient, and 'strainful', compared to using JSON. **/ 

Я надеюсь, что код не требует пояснений.

Answer 2

Dera Geril, то, что вы ищете, обычно называют «каскадным выпадающим списком». Есть много страниц о аргументе, и это действительно зависит от того, какую технологию вы используете. Google это буквально тысячи ресурсов, как с точки зрения учебников, с открытым исходным кодом, так и с лицензированным кодом.

Чтобы указать несколько вопросов, чтобы спросить себя для лучшего принятия решений:

1. ли я использовать какой-либо конкретной Javascript фреймворк? Существует ли для этого специальный код?
2. Нужны ли мне данные, полученные от Ajax (по вашим вопросам, да, но стоит ли указывать)?
3. Нужно ли каскадное выпадающее меню работать, даже если Javascript отключен?
4. Я хочу написать свой собственный код jQuery для управления моими вызовами ajax? Нужно ли мне больше, чем обновление полей выбора?

Возможно, могут быть сделаны и другие соображения.

Упование вы считаете это полезным.