php - 如何使用 JavaScript 填充 HTML 选择列表

Question

我对 HTML 和 javascript 还很陌生。我知道这个代码已经存在于互联网上，但我不能让它为我工作。我在这个问题上被困了2-3天。如果您能帮助我，我将非常高兴。

这是我的问题 我想根据 optPostAppliedFor 的选定条目填充 optCategory 选择列表。为此，当我单击 optPostAppliedFor 列表时，我调用了函数change_categories(key)。代码如下

<tr>
    <td width="40%" align="right" nowrap>
        <strong>
            Post Applied for<span class="text11red">*</span> : 
        </strong>
    </td>
    <td width="60%">
        <select name="optPostAppliedFor" class="flat" onclick="change_categories(0);" />&nbsp;&nbsp;&nbsp;
            <option value="">--Select--</option>
            <?php
            foreach($App['post_applied_for'] as $key => $val){
                echo '<option value="'.($key).'">'.$val.'</option>';
            }
            ?>
        </select>
    </td>
</tr>

这是默认输入 optPostAppliedFor 和 optCategory 的 php 代码

$App['post_applied_for'] = array(
    'Lecturer'         => 'Lecturer',
    'Business Analyst' => 'Business Analyst',
    'Deepender good'   => 'Deepender good'
);
$App['category'] = array(
    'Category1' => 'Category1',
    'Category2' => 'Category2',
    'Category3' => 'Category3'
);

请告诉我如何实现这个功能，以便达到我的目的。我尝试过，但一切都是徒劳。

function change_categoriees(key) {
    alert('asdasd');

    var z = document.getElementById('optCategory');
    var x = document.getElementById('optPostAppliedFor');
    var y = document.createElement('option');

    var display = x.options[x.selectedIndex].text;
    var option = x.options[x.selectedIndex].value;

    y.text = display;
    y.value = option;

    try {
        z.add(y,null);
    } catch(ex) {
        z.add(y);
    }

    z.options[0].text = '* '+(z.length-1)+' selected *';
}

Answer 1

我不太确定，但是......

change_categories 方法中的这两行看起来有问题:

var z = document.getElementById('optCategory');
var x = document.getElementById('optPostAppliedFor');

为了让这些语句返回某些值，您的 HTML 需要具有名称为 optCategory 和 optPostAppliedFor 的 id 属性:

<select id="optPostAppliedFor">

另请注意，PHP 代码在后端服务器中运行。浏览器中运行的javascript无法直接调用PHP。