从第一个和更改操作属性填充第二个选择列表
Populating second select list from the first and change action attr
我有一个PHP数组,它填充第一个选择下拉列表,这样用户就可以选择职业。选择职业后,第二个下拉列表将使用JavaScript函数加载该职业的职位。
然后,我使用jQuery根据第二个下拉列表的值更改表单的动作属性。但是它返回null,因为<option></option>
是通过JavaScript加载的。如果我在选择框中对<option></option>
进行硬编码,则它可以工作。
只是作为一个音符。我没有使用数据库。我使用php数组来保存2个下拉列表的数据。数组已经作为include加载到php页面顶部的页面上。
这里的问题由三部分组成。
首先-如何解决操作属性的问题?
第二个-是否有一种方法可以使用不同的方法来完成第二个下拉列表的填充,这种方法可能效果更好?
Third-如果是ajax,那么既然数组已经加载到php页面中,那么它如何在不再次从服务器中提取php数组数据的情况下获得它?
这是我的代码排列
PHP阵列
$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 pages
echo '
</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来处理on change事件。
相关文章:
- 单击一个数据表,填充第二个数据表
- KnockoutJS-根据第一个组合框中选择的值填充第二个组合框
- 用第一个表单值(HTML、Javascript)填充第二个表单隐藏字段
- 使用Web服务根据对另一个下拉框的选择填充第二个下拉框以获取信息
- 根据 Wordpress 页面中的第一个下拉列表填充第二个下拉列表
- 如何根据第一个<选择>选项填充第二个<选择>选项
- 使用与第一个下拉框相同的值填充第二个下拉框 javascript.
- 下拉菜单动态填充第二个下拉菜单
- jQuery 根据第一个选择菜单中的值选择填充第二个选择菜单
- 使用mysql数据库在第一个下拉框的基础上自动填充第二个下拉框
- 根据第一个下拉列表结果填充第二个下拉列表
- 从第一个和更改操作属性填充第二个选择列表
- 在MVC中的同一视图中填充第二个模型:防止回发
- Select2使用ajax和php基于第一个(多个)选择填充第二个字段
- 根据PHP中选择的第一个下拉框填充第二个下拉框
- 在选择第一个选择框值后填充第二个选择框,如何在脚本中选择要编辑的值
- JS如何用第一个的minDate动态填充第二个日期选择器
- Jquery /ajax填充第二个下拉框并触发更改事件
- 如何基于第一个选择填充第二个选择菜单,基于第二个填充第三个选择菜单-使用Javascript
- 根据前一个输入文本填充第二个输入文本