0

我有一个表单，其中一个下拉菜单生成 2 个字段。现在的问题是我已经生成了一个字段并尝试获取两个字段，在第一个字段中显示价格，在第二个标签中显示 product_id。我的脚本只是显示价格而不是 ID。由于缺乏知识，我被困住了。我只是需要某人的帮助。

JavaScript：

function setOptions(chosen) {
    var selbox = document.myform.opttwo;
    selbox.options.length = 0;
    if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');   }
        selbox.options[selbox.options.length] = new Option('100 Directory Submission', '$9.99', '1');
        selbox.options[selbox.options.length] = new Option('200 Directory Submission', '$19.99', '2');
        selbox.options[selbox.options.length] = new Option('300 Directory Submission','$29.99', '3');
    }
    document.myform.amount.value="";
    document.myform.hidden.value="";
}​

HTML：

<select name="opttwo" size="1" onchange="this.form.amount.value=this.value;">
    <option value=" " selected="selected">Select any option of the above first</option>
</select>
Amount Payable:<input type="text" readonly="readonly" name="amount" />
Product id:<input type="text" name="hidden" readonly="readonly" />
4

1 回答 1

1

首先，您的代码存在一些明显的问题，例如闭合和未闭合的大括号。

这方面的一个例子是：

if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');   }

编辑：情况不再如此。

其次，不幸的是，您尝试创建的 Options 对象没有您尝试获得的“id”属性。

所以你的代码

selbox.options[selbox.options.length] = new Option('100 Directory Submission', '$9.99', '1');

没有得到 '1' 作为它的 id。

构造函数是

new Option([text], [value], [defaultSelected], [selected])

但是，您可以通过在 onchange 处理程序中执行此操作来获取元素的索引：

this.form.hidden.value=this.selectedIndex;

第三，如果您想继续在 onchange 标记中使用脚本（通常不鼓励这样做），您还必须设置隐藏输入的值。

像这样：

onchange="this.form.amount.value=this.value; this.form.hidden.value=this.value;"

注意：上面这行会给你错误的值，只是说，但你明白了它的要点。

我做了一个小提琴供你玩弄，看看它是如何完成的。

就这个

我相信一些 API 文档总是有序的：

更新：为了在每个选项上动态设置 id，您必须像这样遍历选择列表中的元素：

for (var i=0; i<selbox.length; i++){
     selbox.options[i].setAttribute('id', 'hello'+i); 
}

然后在你设置的行中onchange()添加这个

this.form.hidden.value=this[selectedIndex].id;

现在，当您选择一个选项时，您的输入应该显示为“hello0”、“hello1”、“hello2”、“hello3”。

另外，我为你更新了小提琴。

Mozilla 选项 API

于 2012-12-10T11:41:12.517 回答