[英]Another/separate value in Select Option
I have a triple select option menu, that works fine now, but when I post/echo it in PHP both the option name and value are the same, so if I want a category that the name is Books, and that could be id=2 example. 我有一个三重选择选项菜单,现在可以正常使用,但是当我在PHP中发布/回显它时,选项名称和值都相同,因此,如果我想要一个名称为Books且可以为id =的类别, 2个例子。
I don't know how to put another value in the option, separate the name and value, can someone show me how??? 我不知道如何在选项中添加另一个值,将名称和值分开,有人可以告诉我如何做吗???
Everything works fine, except I want to have another value than the same name I use to show option name. 一切工作正常,除了我想拥有一个不同于我用来显示选项名称的名称的值。 I hope you understand.
我希望你明白。 :)
:)
My code: 我的代码:
<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>';
}
?>
I am not sure that I understand your intention, but when a form is submitted, the value(s) of select boxes are delivered to the server. 我不确定我是否理解您的意图,但是在提交表单时,选择框的值会传递到服务器。
The label
property is being displayed in the UI (no need to append a text node). label
属性在UI中显示(无需附加文本节点)。
If you set the value
and label
properties appropriately, you will be able to submit the form with any value that you want. 如果您适当地设置了
value
和label
属性,则可以使用所需的任何值来提交表单。
For example, the option construction code could be: 例如,选项构造代码可以是:
var nOption = document.createElement('option');
nOption.setAttribute('value',each);
nOption.setAttribute('label',nCat[each]);
currList.appendChild(nOption);
And you could get the label by using this.selectedOptions[0].label
. 然后,您可以使用
this.selectedOptions[0].label
获得标签。
Notes: 笔记:
Here is a jsFiddle demo that shows what I believe to be your desired effect. 这是一个jsFiddle演示 ,显示了我认为是您想要的效果。
Since you asked about a better approach, I will describe one possibility that slightly abstracts the logic and separates it from the UI. 既然您询问了一种更好的方法,我将描述一种稍微抽象逻辑并将其与UI分开的可能性。
This is not extremely useful in this type of situations, but it can help in more complex cases. 这在这种情况下不是很有用,但可以在更复杂的情况下提供帮助。
represent the data hierarchically. 分层表示数据。
[{ "id": 131, "label": "Wearing Apparel", "children": [{ "id": 131, "label": "Men", "children": [{ "id": 65, "label": "Shirts" }, ... ] }, { "id": 143, "label": "Women", "children": [{ "id": 133, "label": "Blouses" }, ... ] }] ]
this way, you can encode a tree representation of PHP objects into JSON. 这样,您可以将PHP对象的树表示形式编码为JSON。
Create a jQuery objects that represents the list and generates the markup, since there is little use for it without JavaScript anyway. 创建一个表示该列表并生成标记的jQuery对象,因为如果没有JavaScript,几乎没有用。
I have created a jsFiddle example that does not go all the way, but still demonstrates some of those principles: it generates most of the markup on its own, handles the events itself, able to handle data with arbitrary and varying depth. 我创建了一个jsFiddle示例,该示例并非一路走来,但仍展示了其中一些原理:它自己生成大多数标记,本身处理事件,能够处理任意深度的数据。
If I understand your problem is 如果我了解您的问题是
<option value="Wearing Apparel">Wearing Apparel</option>
that the value and the text(Wearing Apparel) is the same 值和文字(服装)相同
First of all use another array sructure ( but json would be better ) 首先使用另一个数组结构(但是json会更好)
categories["Books"] = [
["Biography"],
["Fiction"],
["Nonfiction"]
];
An your loop 你的循环
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);
}
In this case 在这种情况下
<option value="0">Wearing Apparel</option>
And your POST array will look like 而且您的POST数组看起来像
Array ( [List1] => 0
[next] => Submit
)
Where 0 is the ID of the "Wearing Apparel" element ... and 1 is ID of the "Books" 其中0是“ Wearing Apparel”元素的ID ...,而1是“ Books”的ID
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.