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

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

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

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 demo，它展示了我认为你想要的效果。

编辑：

既然您问到了一种更好的方法，我将描述一种可能的情况，即稍微抽象逻辑并将其与UI分离。

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

1. 按层次表示数据。 [{ "id"：131，“标签”：“穿戴服装”，“儿童”：[{ id“：131，”标签“：”男子“，”儿童“：{ "id"：65，”标签“：”恤“}，}，{ "id"：143，“标签”：“妇女”，“儿童”：{ "id"：133，“标签”：“女衫”}，] 这样，您可以将PHP对象的树表示形式编码为JSON。
2. 创建一个表示列表并生成标记的jQuery对象，因为没有JavaScript就没有什么用处。
3. 尝试使您的实用程序类能够处理更一般的情况，以便将来或者随着当前需求的变化，您仍然可以在对代码进行最小更改的情况下使用它。
4. 尽可能避免内联处理程序(即总是这样)。

我已经创建了一个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是“穿戴服装”元素的ID .1是“图书”的ID