从第一个和更改操作属性填充第二个选择列表 - 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事件。