如何动态生成一个下拉菜单

Question

在我的php中，我创建了两个下拉菜单或选择列表。我的下拉菜单如下：

<select name="food">
    <option value="">...</option>
    <option value="Fruits">Fruits</option>
    <option value="Vegetables">Vegetables</option>
    </select>

<select name="type">
    <option value="">--</option>
    <option value="Apple">Apple</option>
    <option value="Lettuce">Lettuce</option>
    <option value="Orange">Orange</option>
    <option value="Tomato">Tomato</option>
    <option value="Carrots">Carrots</option>
    <option value="Mango">Mango</option>
  </select>

从一页到另一页的切换。

- user3678199

---

你有没有谷歌一下你的标题？ - Funk Forty Niner

可能是重复的问题：如何使用jQuery动态创建下拉列表？ - Sam P

@SamP 不完全是我要找的。那些答案不是很具体。 - user3678199

Answer 1

可以使用jQuery来实现这个功能，但在大型应用程序或网站中，它很快就会变得难以管理。

如果您选择这种方法，我建议避免使用两个不同的选择框，因为这将迫使您为表单POST选择两个不同的名称，除非您使用更多的jQuery技巧来解决此问题。

我的建议是使用一个轻量级JS框架。 Knockoutjs具备你所需的功能。

看看这个JSFiddle。

var fruitOpts = ["Apple", "Orange", "Mango"];
var vegOpts = ["Lettuce", "Tomato", "Carrots"];

$("#food").change(function () {
    var val = $(this).val();
    if (val === "") {
        return;
    }
    $("#type").find('option').not(':first').remove().end();

    $.each(val === "Fruits" ? fruitOpts : vegOpts, function (i, v) {
        $("#type").append("<option value=\"" + v + "\">" + v + "</option>");
    });

    $.each(val === "Fruits" ? vegOpts : fruitOpts, function (i, v) {
        $("#type").append("<option value=\"" + v + "\">" + v + "</option>");
    });
});

- Sam P

Answer 2

这是两个不同的 PHP 页面的版本：

。

1.php

<script src="1.js"></script>
<a id='link' href='2.php'>go to another page</a>
<select id="food" name="food" onchange="selectFoodType()">
    <option value="">...</option>
    <option value="Fruits">Fruits</option>
    <option value="Vegetables">Vegetables</option>
    <option value="Berries">Berries</option>
</select>

1.js

function selectFoodType()
{
    var link = $('#link');
    var type = $('select#food option:selected').val();
    link.attr('href', link.attr('href') + '?type=' + type);
}

2.php

<script src="2.js"></script>
<select id='type' name="type" data-type='<?=$_GET['type']?>'>
    <option value="">--</option>
    <option data-type='Fruits' value="Apple">Apple</option>
    <option data-type='Vegetables' value="Tomato">Tomato</option>
    <option data-type='Vegetables' value="Carrots">Carrots</option>
    <option data-type='Berries' value="Strawberry">Strawberry</option>
</select>

2.js

$(function() {
    var type = $('select#type').data('type');
    var itemsId = document.getElementById("type");
    var items = itemsId.getElementsByTagName("option");
    var selected_type = [], other_types = [];
    selected_type[0] = items[0];
    for (var i = 1; i < items.length; i++){
        if ($(items[i]).data('type') === type) {
            selected_type.push(items[i]);
            continue;
        }
        other_types.push(items[i]);
    }
    selected_type = selected_type.sort(sortByName);
    other_types = other_types.sort(sortByName);
    $.merge(selected_type, other_types);
    var list = '';
    for (i=0; i<selected_type.length; i++) {
        list += selected_type[i].outerHTML;
    }
    $(items).remove();
    $(itemsId).append(list);
});

function sortByName(a, b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    return 0;
}

- ollazarev

Answer 3

您应该将所有Fruits和Vegetables的内容分配到JavaScript对象中，并在另一个下拉菜单中显示food值的相关内容，请参见下面的演示

Food: 
 <select name="food" id="food">
   <option value="">...</option>
   <option value="Fruits">Fruits</option>
   <option value="Vegetables">Vegetables</option>
 </select>
Content 
 <select name="contents" id="contents">
  <option value="">...</option>
 </select>

JS 代码

var data = {
   'Fruits':['Apple', 'Lettuce', 'Orange', 'Mango'], 
   'Vegetables': ['Tomato', 'Carrots']
};

document.getElementById("food").onchange = function(Event){
    var contents = document.getElementById("contents");
    contents.innerHTML = "";
    for(var i in data[this.value]){
        var option = document.createElement("option");
        option.setAttribute('value',data[this.value][i]);
        option.text = data[this.value][i];
        contents.appendChild(option);
    }
    var expect_data = Event.target.value == "Fruits" ? "Vegetables" : "Fruits";
    for(var i in data[expect_data]){
        var option = document.createElement("option");
        option.setAttribute('value',data[expect_data][i]);
        option.text = data[expect_data][i];
        contents.appendChild(option);
    }
}

演示代码

- Girish

---

不错！但我认为他仍然想以某种方式显示未选择的选项，只是在列表底部。 - Sam P

@SamP，我错过了那个问题，请看我的更新答案。 - Girish

Answer 4

你需要使用JQuery来完成此任务。
查看我的解决方案：http://jsfiddle.net/inventorx/YU4vJ/

代码如下：

HTML

<select name="food" >
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
</select>

<select name='type' >
    <option>-- Select Food Type --</option>
</select>

<select id='Fruits' style='display:none' >
<option value="">--</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Mango">Mango</option>
</select>

<select id='Vegetables' style='display:none' >
<option value="">--</option>
<option value="Lettuce">Lettuce</option>
<option value="Tomato">Tomato</option>
<option value="Carrots">Carrots</option>
</select>

JQUERY

$(document).ready(function(){
    $("select[name='food']").on("change", function(){
              var value = $(this).val();
              $("select[name='type']").html($("#" + value).html());
      });
});

- InventorX

Answer 5

另一个选项。

列表分为两个数组：食品，对应于所选类型；和不对应所选类型。这些数组中的每一个都按名称排序：

JSFIDDLE

HTML：

<select id="food" name="food" onchange="selectFoodType()">
    <option value="">...</option>
    <option value="Fruits">Fruits</option>
    <option value="Vegetables">Vegetables</option>
    <option value="Berries">Berries</option>
</select>
<select id='type' name="type">
    <option value="">--</option>
    <option data-type='Fruits' value="Apple">Apple</option>
    <option data-type='Vegetables' value="Lettuce">Lettuce</option>
    <option data-type='Vegetables' value="Tomato">Tomato</option>
    <option data-type='Berries' value="Strawberry">Strawberry</option>
</select>

JQuery：

function selectFoodType()
{
    var type = $('select#food option:selected').val();
    var itemsId = document.getElementById("type");
    var items = itemsId.getElementsByTagName("option");
    var selected_type = [], other_types = [];
    selected_type[0] = items[0];
    for (var i = 1; i < items.length; i++){
        if ($(items[i]).data('type') === type) {
            selected_type.push(items[i]);
            continue;
        }
        other_types.push(items[i]);
    }
    selected_type = selected_type.sort(sortByName);
    other_types = other_types.sort(sortByName);
    $.merge(selected_type, other_types);
    var list = '';
    for (i=0; i<selected_type.length; i++) {
        list += selected_type[i].outerHTML;
    }
    $(items).remove();
    $(itemsId).append(list);
}

function sortByName(a, b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    return 0;
}

- ollazarev

---

这真的起作用了，而且您还添加了更多的值。然而，我想知道如何将其实现到两个不同的php表单中？我的意思是，第一个下拉列表在一个php页面中，而第二个下拉列表在另一个php页面中，它在我的第一个php之后出现。 - user3678199

好的。我为两个不同的PHP页面添加了版本。 - ollazarev