Первое выпадающее меню для автоматического изменения параметров второго выпадающего меню

У меня есть два раскрывающихся меню, в которых параметры не получаются из базы данных.

Первый, позволяет пользователю выбирать категорию.

<select name="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

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

<select name="items">
    <option value="3">Smartphone</option>
    <option value="8">Charger</option>
</select>

но когда пользователь изменит свое мнение или сначала выберите параметр второй, затем появится второе раскрывающееся меню

<select name="items">
    <option value="1">Basketball</option>
    <option value="4">Volleyball</option>
</select>

Мой вопрос: как я могу это достичь? Можно ли это сделать без использования базы данных?

Спасибо!

ОТВЕТЫ

Ответ 1

См. ниже рабочий стол без использования базы данных.

Рабочий пример с использованием базы данных MySQL

Если вы хотите подключить его с помощью базы данных, да, это, безусловно, возможно. Рассмотрим эту таблицу:

CREATE TABLE `contents` (
    `id` INT PRIMARY KEY AUTO_INCREMENT,
    `name` VARCHAR (255),
    `parent` INT DEFAULT 0
);

INSERT INTO `contents` (`name`, `parent`) VALUES
    ('Names', 0),
    ('Places', 0),
    ('Animals', 0),
    ('Praveen', 1),
    ('Bill Gates', 1),
    ('Steve Jobs', 1),
    ('India', 2),
    ('New York', 2),
    ('London', 2),
    ('Singapore', 2),
    ('Cat', 3),
    ('Dog', 3),
    ('Tiger', 3),
    ('Deer', 3)

Структура таблицы

+----+------------+--------+
| id | name       | parent |
+----+------------+--------+
|  1 | Names      |      0 |
|  2 | Places     |      0 |
|  3 | Animals    |      0 |
|  4 | Praveen    |      1 |
|  5 | Bill Gates |      1 |
|  6 | Steve Jobs |      1 |
|  7 | India      |      2 |
|  8 | New York   |      2 |
|  9 | London     |      2 |
| 10 | Singapore  |      2 |
| 11 | Cat        |      3 |
| 12 | Dog        |      3 |
| 13 | Tiger      |      3 |
| 14 | Deer       |      3 |
+----+------------+--------+

Исходный код HTML и PHP

Теперь, позвольте использовать PHP, чтобы сначала заполнить начальный <select>:

<?php
    mysql_connect();
    mysql_select_db("contents");
    $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = 0");
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

Теперь <select> готов. С помощью функции onchange мы можем запустить событие AJAX, чтобы получить новый <select> с данными, предоставленными родительским <select>.

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</select>

Теперь для функции jQuery вы можете сделать так:

<script type="text/javascript">
    function ajaxfunction(parent)
    {
        $.ajax({
            url: 'process.php?parent=' + parent;
            success: function(data) {
                $("#sub").html(data);
            }
        });
    }
</script>

В HTML после <select> вам нужно указать еще один select с id как sub.

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</select>
<select id="sub"></select>

Обработка исходного кода PHP

Наконец, исходный код process.php:

<?php
    mysql_connect();
    mysql_select_db("contents");
    $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = " . mysql_real_escape_string($_GET["parent"]));
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

Рабочий пример без использования базы данных

Вам просто нужно заменить это на PHP.

<?php
    $parent = array("Name", "Place", "Animals");
    foreach ($parent as $id => $name)
        echo '<option value="s', $id,'">', $name,'</option>'
?>

И для process.php:

<?php
    $parent = array("Name", "Place", "Animals");
    $s0 = array("Praveen", "Bill Gates", "Steve Jobs");
    foreach (${$_GET["parent"]} as $id => $name)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

Ответ 2

Часть о базе данных не совсем понятна, так как выборки предположительно будут "перечислены" в некотором роде. Если у вас их в каком-то другом формате, это имеет смысл, или если вы спрашиваете, нужен ли обратный вызов в базе данных (postback), ответ будет отрицательным. Но неясно, что вы имеете в виду.

Во всяком случае, вы можете использовать значение rel="" (или data-items=""), чтобы установить связь между тем, который выбирается другим.

Например:

CSS

.cascade {
    display: none;
}

HTML - изменено

<select name="category">
    <option value="0">None</option>
    <option value="1" rel="accessories">Cellphones</option>
    <option value="2" rel="sports">Sports</option>
    <option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
    <option value="3" class="accessories">Smartphone</option>
    <option value="8" class="accessories">Charger</option>
    <option value="1" class="sports">Basketball</option>
    <option value="4" class="sports">Volleyball</option>
    <option value="6" class="cars">Corvette</option>
    <option value="2" class="cars">Monte Carloe</option>
</select>

JQuery

$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $items = $('select[name=items]');

    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel'),
            $set = $items.find('option.' + rel);

        if ($set.size() < 0) {
            $items.hide();
            return;
        }

        $items.show().find('option').hide();

        $set.show().first().prop('selected', true);
    });
});

http://jsfiddle.net/userdude/bY5LF/

Ответ 3

Вот еще один пример: в основном все данные находятся на странице в объекте, и вы используете его для отображения разных категорий FIDDLE

var categories = {
    "None":[{value:'3', text:'No cataegory selected'}],
    "First":[{value:'1', text:'Bmw'},{value:'2', text:'Benz'}],
    "Second":[{value:'4', text:'Playstation'},{value:'5', text:'Xbox'},{value:'10', text:'Wii'}],
    "Third":[{value:'6', text:'Dell'},{value:'7', text:'Acer'}],
    "Fourth":[{value:'8', text:'Audi'},{value:'9', text:'Datsun'}]
};
function selectchange(){
    var select = $('[name=items]');
    select.empty();
    $.each(categories[$(':selected', this).text()], function(){
        select.append('<option value="'+this.value+'">'+this.text+'</option>');
    });
}
$(function(){
    $('[name=category]').on('change', selectchange);
});

Ответ 4

2 Рабочая демонстрация для вашего кода :) http://jsfiddle.net/PnSCL/2/ ИЛИ http://jsfiddle.net/PnSCL/

Достижимо, но вам нужно установить связь между первым и вторым выбором.

Пожалуйста, загляните сюда: http://api.jquery.com/data/

Я добавил label для отношения здесь http://jsfiddle.net/PnSCL/2/ [http://www.w3schools.com/tags/tag_option.asp]

Поведение. Когда вы выберете опцию first из select1, тогда будет отображаться smartphone, chargers иначе, когда пользователь выберет second из select1, он покажет baskeball, voleyball в select2.

Надеюсь, что это поможет, Пожалуйста, дайте мне знать, если я что-то пропустил.

Демо 1

код

$("#category").change(function() {
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    }
var id = $(this).val();
var options = $(this).data('options').filter('[label=' + id + ']');
$('#select2').html(options);
   // alert(options);
});

HTML

<select name="select1" id="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

<select name="items" id="select2">

    <option value="3" label="1">Smartphone</option>
    <option value="8" label="1">Charger</option>

    <option value="1" label="2">Basketball</option>
    <option value="4" label="2">Volleyball</option>
</select>

DEMO 2 * Код *

$("#category").change(function() {
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    }
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
    alert(options);
});

HTML

<select name="select1" id="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

<select name="items" id="select2">

    <option value="1">Smartphone</option>
    <option value="1">Charger</option>

    <option value="2">Basketball</option>
    <option value="2">Volleyball</option>
</select>

Ответ 5

Рабочее решение без использования базы данных:

HTML

<select name="country" id="country" onChange="showState();">   
    <option value="">Select Country</option>
    <option value="1">Pakistan</option>
    <option value="2">Saudi Arabia</option>
</select>

<div id="div_state"></div>

Jquery

<script>
    function showState()
    {
        $('body').css('cursor','wait');
        var value = document.getElementById('country').value;
        var url = 'http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/';

        $.ajax({
            type: "GET",
            url: url,
            data:{'country':value},
            success:function(results)
            {              

                $('#div_state').html(results);

                if (value == "1") 
                {
                    $('#PK').css('display','block')                
                } 

                else if (value == "2") 
                {
                    $('#SA').css('display','block')                        
                }

                $('body').css('cursor','default');            

            }
        });
    }
</script>

CSS

#PK, #SA { display: none; }

СМОТРИТЕ ДЕМО http://jsfiddle.net/rathoreahsan/WyLsh/

States Страница: http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/

Ответ 6

Просто предлагаю, как вы можете это сделать -

<select name="country" id="country" onChange="showState();" >
<option value="">Select Country</option>
<option value="1">India</option>
<option value="2">Nepal</option>
</select>

Ваш Script -

<script type="text/javascript">
function showState( )
{
var value = document.getElementById('country').value;
var url = '<?php echo base_url ?>showstate.php';
$.ajax({
type: "GET",
url: url,
data:{'country':value},
success:function(results)
{   
    $('#div_state').html(results);
}
});
}
</script>

Ваша страница showstate.php php -

//INCLUDE CONNECTION file to for db query
$type = $_GET['country'];

//Your DB QUERIES
//Your data on Get condition
/*USING SWITCH--
switch ($type) {
case "India":
    echo "I m in India";
    break;
case "Nepal":
    echo "I am in Nepal";
    break;

Это загрузит содержимое вашего #div_state div. Вы также можете использовать JQuery для этого.. я думаю, что это поможет вам:) и дайте мне знать, если у вас есть какие-либо вопросы.

Ответ 7

$(document).ready(function(){
    $('#causes').change(function(){

         $.getJSON("<?=URL.$param->module."/".$param->controller?>/getcourtcauses",{causeId:  $(this).val()}, function(j){ 

        var options = '';
        if(j.length > 1 )
        {
            for (var i = 0; i < j.length; i++) {
                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            if($('#subcauses').hide())
                {
                    $('#subcauses').show();
                }
                $('#subcauses').attr('disabled', false);
            $("#subcauses").html("");
            $("#subcauses").html(options);
         }
        else
            {
                $('#subcauses')
                    .find('option')
                    .remove()
                    .end();
                 $('#subcauses').attr('disabled', true);
            }
        });