0

我有一个三重选择选项菜单，现在可以正常工作，但是当我在 PHP 中发布/回显它时，选项名称和值都是相同的，所以如果我想要一个名称为 Books 的类别，那可能是 id= 2 例子。

我不知道如何在选项中放置另一个值，将名称和值分开，有人可以告诉我如何吗？？？

一切正常，除了我想有另一个值，而不是我用来显示选项名称的同名。我希望你明白。:)

我的代码：

<script type="text/javascript">

var categories = [];

categories["startList"] = ["Wearing Apparel","Books"];

categories["Wearing Apparel"] = ["Men","Women","Children"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];

categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];

categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){

    var step = Number(currList.name.replace(/\D/g,""));

    for (i=step; i<nLists+1; i++) {
        document.forms['tripleplay']['List'+i].length = 0;
        document.forms['tripleplay']['List'+i].selectedIndex = 0;
    }

    var nCat = categories[currCat];

    for (each in nCat) {
        var nOption = document.createElement('option'); 
        var nData = document.createTextNode(nCat[each]); 
        nOption.setAttribute('value',nCat[each]); 
        nOption.appendChild(nData); 
        currList.appendChild(nOption); 
    } 
}

function init() {
    fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);    

</script>




<form name="tripleplay" action="" method="post">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])" size="5">
</select>

<select name='List2' onchange="fillSelect(this.value,this.form['List3'])" size="5">
</select>

<select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)"  size="5">
</select>

<br><br>

<input type="submit" value="Submit" name="next" />
</form>


<?php 
    if($_POST['next'])
    {
        echo $_POST['List1'].'<br>'.$_POST['List2'].'<br>'.$_POST['List3'].'<br>';
    }
?>
4

2 回答 2

0

我不确定我是否理解您的意图，但是当提交表单时，选择框的值会传递到服务器。

该label属性正在 UI 中显示（无需附加文本节点）。

如果您适当地设置value和label属性，您将能够使用您想要的任何值提交表单。

例如，选项构造代码可以是：

var nOption = document.createElement('option'); 
nOption.setAttribute('value',each); 
nOption.setAttribute('label',nCat[each]); 
currList.appendChild(nOption);

您可以使用this.selectedOptions[0].label.

笔记：

  1. 您使用的编码风格不是很好。
  2. 您使用内联事件处理并且不将业务逻辑与 UI 分开来命名主要问题。
  3. 我建议您尝试某种 JavaScript 框架，例如 jQuery，它可以防止您重新发明轮子并大大简化您的开发，让您有时间做实际工作（您也可以考虑使用服务器端 PHP 框架）。

这是一个jsFiddle 演示，它显示了我认为您想要的效果。

编辑：

由于您询问了一种更好的方法，我将描述一种稍微抽象逻辑并将其与 UI 分开的可能性。

这在这种情况下并不是非常有用，但它可以在更复杂的情况下提供帮助。

  1. 分层表示数据。

    [{
    "id": 131,
    "label": "Wearing Apparel",
    "children": [{
        "id": 131,
        "label": "Men",
        "children": [{
            "id": 65,
            "label": "Shirts"
        }, ...
        ]
    }, {
        "id": 143,
        "label": "Women",
        "children": [{
            "id": 133,
            "label": "Blouses"
        }, 
        ...
        ]
    }]
]

    这样，您可以将 PHP 对象的树表示编码为 JSON。

  2. 创建一个表示列表并生成标记的 jQuery 对象，因为无论如何如果没有 JavaScript，它几乎没有用处。

  3. 尝试使您的实用程序类能够处理更一般的情况，以便在将来或当您当前的需求发生变化时，您仍然可以在对代码进行最小更改的情况下使用它。
  4. 尽可能避免使用内联处理程序（即，总是）。

我已经创建了一个jsFiddle示例，它并没有一路走下去，但仍然展示了其中的一些原则：它自己生成大部分标记，自己处理事件，能够处理任意和不同深度的数据。

于 2013-08-12T15:00:06.393 回答
0

如果我理解你的问题是

<option value="Wearing Apparel">Wearing Apparel</option>

值和文本（穿着服装）相同

首先使用另一个数组结构（但json会更好）

categories["Books"] = [
                         ["Biography"],
                         ["Fiction"],
                         ["Nonfiction"]
                      ];

你的循环

    for (i=0; i<nCat.length; i++) {

        var nOption = document.createElement('option'); 
        var nData = document.createTextNode(nCat[i]);  // <------- use the "text"
        nOption.setAttribute('value',i);  // <------- use the index of the step
        nOption.appendChild(nData); 
        currList.appendChild(nOption); 

}

在这种情况下

<option value="0">Wearing Apparel</option>

你的 POST 数组看起来像

Array ( [List1] => 0 
        [next] => Submit 
)

其中 0 是“Wearing Apparel”元素的 ID ...而 1 是“书籍”的 ID

于 2013-08-12T15:46:37.537 回答