Question

我有一个三重选择选项菜单，现在工作正常，但是当我在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>';
    }
?>

Answer 1

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

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

如果您恰当地设置了value和label属性，则可以使用您想要的任何值提交表单。

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

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

您可以使用this.selectedOptions[0].label获取标签。

注意：

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

这是jsFiddle demo，显示了我认为你想要的效果。

编辑：

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

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

分层次地表示数据。

[{
    "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。

创建一个表示列表的jQuery对象并生成标记，因为没有JavaScript它几乎没有用。
尝试制作您的实用程序类，以便它们可以处理更多一般情况，以便将来或当您的当前需求发生变化时，您仍然可以在对代码进行最少更改的情况下使用它。
尽可能避免使用内联处理程序（即始终）。

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

Answer 2

如果我理解你的问题是

<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

选择选项中的另一个/单独值

2 个答案:

编辑：