Javascript 从第一个选择列表填充第二个选择列表并更改操作属性

我有一个PHP数组，用于填充第一个选择下拉列表，以便用户可以选择职业。选择职业后，第二个下拉列表将使用JavaScript函数加载该职业的职位

然后，我使用jQuery根据第二个下拉列表的值更改表单的action attr。但它返回null，因为正在通过JavaScript加载。如果我在选择框中硬编码，那么它就工作了

作为一个注释。我没有使用数据库。我使用一个php数组来保存两个下拉列表的数据。该数组已经作为包含在php页面顶部加载到页面上

这里有三个问题

首先-如何使用action attr解决问题

第二，有没有一种方法可以更好地填充第二个下拉列表

第三，如果是ajax，那么既然数组已经加载到php页面中，那么它如何在不再次从服务器中提取php数组数据的情况下获取php数组数据呢

这是我的代码安排

PHP数组

Select和foreach循环

关于第一个问题，即如何动态设置表单操作，下面是一个测试代码：

---

然后使用JS来处理更改事件。

我看不出这是如何解决表单的action attr问题的？jSON仍然在做与JavaSCript相同的事情，JavaSCript动态填充select选项。因此，无论我使用JS还是JSON，表单的action attr仍然会基于第二个选中选项的值获得一个空值。对象是获取第二个下拉列表的值，以填充表单的action attr。与我已有的相比，JSON在这方面有什么帮助？谢谢。您将如何编写JS来处理on change事件？正如我前面提到的，这里有一个非常好的示例：。这个url已经有了解决方案：谢谢，我已经回到了您的第一个JSFIDLE示例。无法完全使用他在示例底部使用的jquery。我来看看另一个问题。

$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',))
);

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>
';

<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>

$('#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>

<?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>";

var pages = {
    "Engineer": {
        "pageTitle": "Engineer",
        "subpages": {
            "Software Engineer": "Software",
            "Embedded Software Engineer": "Embedded Software"
        }
    },
    "Analyst": {
        "pageTitle": "Analyst",
        "subpages": {
            "Systems-Analyst": "Systems",
            "Data-Analyst": "Data"
        }
    }
}