Question

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

＆＃13;

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

＆＃13;

一页到下一页。

Answer 1

使用jQuery可以做到这一点，但在大型应用或网站中很快就会变得无法管理。

如果你走这条路，我会避免使用两个不同的选择框，因为这将迫使你为表单POST选择两个不同的名称，除非你使用更多的jQuery hackery来解决这个问题

我的建议是看一个轻量级的JS框架。 Knockoutjs有你需要的东西。

Look at this 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>");
    });
});

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

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);
    }
}

FIDDLE DEMO

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());
      });
});

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

如何动态生成下拉菜单

5 个答案: