Надеюсь, что я не беспокою вас все с моим вопросом, потому что я относительно новичок в jQuery и JavaScript, и я мало что знаю об этом.
Я хочу создать раскрывающееся меню. Если пользователь выбрал значение из раскрывающегося меню выбора, появится новое раскрывающееся меню выбора, основанное на выбранном значении, например, веб-сайты об автомобилях, где вы выбираете (например), BMW, а затем вы увидите новый выпадающее меню, где вы можете выбрать из моделей автомобилей BMW.
Извините за любые грамматические ошибки. Я голландский.
Надеюсь, вы сможете мне помочь. Как я уже сказал, я новичок в jQuery и JavaScript, и я надеюсь, что кто-то сможет это объяснить.
Здесь DEMO
Учитывая массив значений, таких как:
var mainDropdownValues = {1: "one",
2: "two",
3: "three",
4: "four"};
и с вспомогательной функцией, такой как:
var assignValuesToDropDown = function( dropdownSelector, valuesArray ){
var seloption = '';
$.each( valuesArray, function(index, value){
seloption += '<option value="'+ index +'">'+ value +'</option>';
});
$(dropdownSelector).append(seloption);
};
Вы можете сделать это, чтобы заполнить первый снимок, когда страница готова:
$().ready(function(){
assignValuesToDropDown( "#mainDropdown", mainDropdownValues );
// add a listener for when the value change on the main dropdown, to update
// the second one.
$('#mainDropdown').on('change', function(){
// need to get the second set of values from somewhere (see demo for how I did it)
assignValuesToDropDown( "#secondaryDropdown", dropDownValues ); });
});
Приведенный ниже код позволяет пользователю выбрать раскрывающийся id = "division" для повторного заполнения раскрывающегося id = "branch_no". Обратите внимание на метод jQuery.getJSON - вызов AJAX на страницу PHP, которая выполняет запрос и возвращает данные JSON.
$('#division').change(function() {
jQuery.getJSON( 'gAjaxJsonBranches.php?division=' + $('#division').val(), null, function(jdata) {
var jObj = jQuery.parseJSON(jdata);
var $el = $("#branch_no");
$el.empty();
$el.append($("<option></option>").attr("value", '').html('<<SELECT>>'));
$.each(jObj.searches, function(key, value) {
$el.append($("<option></option>").attr("value", value['id']).text(value['item']));
});
});
});
Код для gAjaxJsonBranches.php использует поиск базы данных:
<?php
$conn = new PDO('mysql:host=yourhost;dbname=yourdb', 'user', 'password');
$search_list = '{ "searches": [ ';
$l_sql = "SELECT b.branch_no, b.branch_name " ;
$l_sql .= "FROM branches b INNER JOIN divisions d ON b.divisions_id = d.id " ;
$l_sql .= "WHERE d.division = '" . $_GET["division"] . "' " ;
$l_sql .= "ORDER BY b.divisions_id, b.branch_no ";
foreach ($conn->query($l_sql) as $l_row) {
if(trim($l_row[1]) != '') {
$search_list .= '{' ;
$search_list .= '"id": "' . $l_row[0] . '",' ;
$search_list .= '"item": "' . $l_row[0] . '-' . $l_row[1] . '"' ;
$search_list .= '},' ;
}
}
$search_list = substr($search_list, 0, -1);
$search_list .= '] }';
header('Content-type: text/plain');
echo json_encode($search_list);
exit();
сначала у вас есть проблема с вашим кодом, потому что checkname может быть неопределенным, и он не может использовать функцию тестирования там.
Оба ваших выпадающих списка должны иметь идентификатор.
Я предлагаю вам сначала проверить, не проверено ли имя проверки, а затем выполнить следующую проверку
$( "#target" ).select(function() {
// do the call to ajax and popualte the next dropdown
});
Для получения дополнительной информации вы можете посетить http://jqapi.com/#p=select. Также вы можете узнать больше о ajax здесь http://www.w3schools.com/ajax/default.asp
Аналогичное сообщение Как заполнить каскадное раскрывающееся меню с помощью JQuery
Хорошего дня