Question

我有一个选择项，其中包含一个文件列表。这个文件列表存储在php变量中。

我有另一个目录的文件列表，存储在另一个变量中。

我有一个下拉列表，有2个选项。当我更改下拉列表时，我希望select中的项目更改为与所选项目关联的文件列表。

例如，我的下拉列表包含：

杂项图片
人

我有2个变量，$misc和$people。

选择其他时，我希望select包含$misc中列出的所有图像，当选择People选项时，我希望select包含$people中列出的所有选项。 / p>

至于循环通过php生成所有项目都没问题，我不明白的是如何做javascript部分？

谢谢，并对措辞不佳道歉。

Answer 1

你可以提供一些代码吗？完全没有任何东西写它是非常沉重的：）

更新：

然后你如何使用jQuery尝试以下（或类似）：

<select id="foo">
    <option class="misc">MISC</option>
    <option class="misc">MISC2</option>
    <option class="people">People1</option>
</select>
<script type="text/javascript">
    $(document).ready(function(){
        $('option.misc').click(function(){
            $('#foo').html('<option class="misc">MISC</option>
            <option class="misc">MISC2</option>');
        });
    });
</script>

Answer 2

我觉得this之类的东西会起作用。您可以设置下拉框的onchange属性来调用该函数。您需要有一个URL，该URL返回您要在JSON中使用的选项（在该示例中为selectMenus.php）。您需要两个不同的URL或一个带参数来指示哪个选项集。

Answer 3

PHP是服务器端。 JavaScript是客户端。你有两个选择（1）将XmlHTTP请求发送回服务器以提取选项并更新选择列表，或者（2）将值发送到页面初始呈现的隐藏字段并从那里获取值。

Answer 4

尝试使用此代码。

PHP：

<?php
    $miscArray = array("misc1", "misc2", "misc3");
    $misc = implode(", ", $miscArray);
    $peopleArray = array("people1", "people2", "people3");
    $people = implode(", ", $peopleArray);
?>

HTML：

<form action="#">
    <select id="fileCat">
        <option id="misc">Misc</option>
        <option id="miscData" style="display:none"><?php echo $misc ?></option>
        <option id="people">People</option>
        <option id="peopleData" style="display:none"><?php echo $people ?></option>
    </select>
    <select id="files"></select>
</form>

JS：

init();

function init()
{
    addListeners();  
}

function addListeners()
{
    document.getElementById("fileCat").onchange = fillSelect; 
}

function fillSelect()
{
    var fileCat = document.getElementById("fileCat");
    var imageFiles;
    switch(fileCat.options[fileCat.selectedIndex].id)
    {
        case "misc":
        imageFiles = document.getElementById("miscData").innerHTML.split(", ");
        break;    
        case "people":
        imageFiles = document.getElementById("peopleData").innerHTML.split(", ");
        break;  
    }
    var parent = document.getElementById("files");
    parent.innerHTML = "";
    if(imageFiles.length)
    {
        for(var i=0;i<imageFiles.length;i++)
        {
            var option = document.createElement("option");
            //populate option with corresponding image text
            option.innerHTML = imageFiles[i];
            parent.appendChild(option);
        }
    }
}

我在PHP中模拟了一些数据，然后将其回显为每个类别的隐藏<option>标记。然后，根据所选选项的ID，使用案例/开关抓取数据。

根据下拉列表更改HTML选择的内容

4 个答案: