JavaScript — заполнение второго списка выбора из первого и изменение действия атрибута
У меня есть массив PHP, который заполняет первый выпадающий список выбора, чтобы пользователь мог выбрать профессию. После выбора занятия второй раскрывающийся список загружается с вакансиями для этого занятия с использованием функции JavaScript.
Затем я использую jQuery для изменения атрибута действия формы на основе значения второго раскрывающегося списка. Но он возвращает ноль, потому что <option></option> загружаются через JavaScript. Если я жестко закодирую <option></option> в поле выбора, тогда это работает.
Просто как примечание. Я не использую базу данных. Я использую массив php для хранения данных для 2 выпадающих списков. Массив уже загружен на страницу в виде включения в верхней части страницы php.
Здесь три вопроса.
Первый — как мне решить мою проблему с помощью действия attr?
второй — Есть ли способ выполнить заполнение второго раскрывающегося списка, используя другой метод, который может работать лучше?
В третьих — И если это ajax, как он может получить данные массива php без повторного извлечения их с сервера, поскольку массив уже загружен на страницу php?
Вот мое расположение кода
PHP Array
$pages = array(
// Engineer
'Engineer' => array('pageTitle' => 'Engineer', 'subpages' => array(
'Software Engineer' => 'Software',
'Embedded Software Engineer' => 'Embedded Software',)),
// Analyst
'Analyst' => array('pageTitle' => 'Analyst', 'subpages' => array(
'Systems-Analyst' => 'Systems',
'Data-Analyst' => 'Data',))
);
Цикл выбора и foreach
echo '<form method="POST" action="?position=" id="menuform">
<select name="occupation" id="occupation">
<optgroup label="Select Occupation">
<option value="" selected disabled>Select Occupation</option>';
foreach ($pages as $filename => $value) {
echo '
<option value="'.$filename.'"'.((strpos($position, $filename) !== false) ? ' selected' : '').'>'.$filename.'</option>';
} // foreach pagesecho '
</optgroup>
</select>
<select name="position" id="position" onchange="this.form.submit()">
</select>
</form>
';
JavaScript
<script type="text/javascript">
var occupation = document.getElementById("occupation");
var position = document.getElementById("position");
onchange(); //Change options after page load
occupation.onchange = onchange; // change options when occupation is changed
function onchange() {
<?php foreach ($pages as $filename => $value) {?>
if (occupation.value == '<?php echo $filename; ?>') {
option_html = "\n<? echo'<option selected disabled>Select Position</option>'; ?>\n";
<?php if (isset($value ['subpages'])) { ?>
<?php foreach ($value ['subpages'] as $subfilename => $subpageTitle) { ?>
option_html += "<? echo '<option value=\''.urlencode($subfilename).'\''.(($position == $subfilename) ? ' selected' : '').'>'.$subpageTitle.' '.$filename.'</option>'; ?>\n";
<?php } ?>
<?php } ?>
position.innerHTML = option_html;
}
<?php } ?>
}
</script>
JQuery
$('#menuform').attr('action',$('#menuform').attr('action')+$('#position').val());
Решение
Что касается вашего первого вопроса, как динамически установить действие формы, вот тестовый код:
<?php
$pages = array(
'Engineer' => array(
'pageTitle' => 'Engineer',
'subpages' => array(
'Software Engineer' => 'Software',
'Embedded Software Engineer' => 'Embedded Software',
)
),
'Analyst' => array(
'pageTitle' => 'Analyst',
'subpages' => array(
'Systems-Analyst' => 'Systems',
'Data-Analyst' => 'Data',
)
)
);
?>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 id="form-action-shower">Form action: <span></span></h4>
<form method="POST" action="?position=" id="menuform">
<select name="occupation" id="occupation">
<optgroup label="Select Occupation">
<option value="" selected disabled>Select Occupation</option><br />
<?php foreach($pages as $occupation => $occData): ?>
<option value="<?php echo $occupation ?>"><?php echo $occupation ?></option>
<?php endforeach ?>
</optgroup>
</select>
<select name="position" id="position">
<optgroup label="Select Position">
<option value="" selected disabled>Select Position</option><br />
<?php foreach($pages as $occupation => $occData): ?>
<?php foreach($occData['subpages'] as $key => $value): ?>
<option value="<?php echo $key ?>"><?php echo $value ?></option>
<?php endforeach ?>
<?php endforeach ?>
</optgroup>
</select>
<input type="submit" value="Click here to test form action">
</form>
<script>
$('#position').change(function() {
var form_action = '?position=' + $(this).val();
$('#menuform').attr('action', form_action);
$('#form-action-shower span').html(form_action);
});
</script>
Что касается вашего второго и третьего вопроса:
Вы можете использовать JSON для решения таких проблем. Вот пример, который я нашел: http://jsfiddle.net/YqLh8/
Вы можете использовать PHP, чтобы структура массива была доступна в JS:
<?php
$pages = array(
'Engineer' => array('pageTitle' => 'Engineer', 'subpages' => array(
'Software Engineer' => 'Software',
'Embedded Software Engineer' => 'Embedded Software',)
),
'Analyst' => array('pageTitle' => 'Analyst', 'subpages' => array(
'Systems-Analyst' => 'Systems',
'Data-Analyst' => 'Data',)
)
);
$json_pages = json_encode($pages);
echo "<script>var pages = $json_pages;</script>";
Что дает вам объект JS, такой как:
var pages = {
"Engineer": {
"pageTitle": "Engineer",
"subpages": {
"Software Engineer": "Software",
"Embedded Software Engineer": "Embedded Software"}
},
"Analyst": {
"pageTitle": "Analyst",
"subpages": {
"Systems-Analyst": "Systems",
"Data-Analyst": "Data"}
}
}
Затем используйте JS для обработки событий при изменении.
Другие решения
Других решений пока нет …