javascript 为什么在选择框上调用 .options 时会出现“未定义”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7367197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why am I getting "undefined" when I call .options on my select box?
提问by counterbeing
I am trying to follow this tutorial (http://railscasts.com/episodes/88-dynamic-select-menus) to get dynamic select boxes working with RoR. No need to worry about the RoR bit, this is a Javascript specific question.
我正在尝试按照本教程 (http://railscasts.com/episodes/88-dynamic-select-menus) 获取使用 RoR 的动态选择框。无需担心 RoR 位，这是一个 Javascript 特定问题。
Every time this function runs I get the error that the "options" is undefined. I've tried running the command manually in the console, but regardless, it spits out undefined. I have it typed exactly as I see it in the tutorial, but somehow it's not working for me...
每次运行此函数时，我都会收到“选项”未定义的错误。我尝试在控制台中手动运行该命令，但无论如何，它都未定义。我完全按照我在教程中看到的那样输入它，但不知何故它对我不起作用......
Here's the javascript in question:
这是有问题的javascript：
function clientSelected() {
var client_id = $('#piece_client_id').val();
// THIS IS THE PROBLEM LINE
var options = $('piece_campaign_id').options;
options.length = 0;
campaigns.each(function(campaign) {
if (campaign[0] == client_id) {
options[options.length] = new Option(campaign[1], campaign[2]);
}
});
if (options.length == 1) {
$('campaign_field').hide();
} else {
$('campaign_field').show();
}
}
Here is the HTML that it's trying to work on:
这是它正在尝试处理的 HTML：
<select id="piece_campaign_id" name="piece[campaign_id]"><option value=""></option>
<option value="1">Feed The Dogs</option>
<option value="2">Watch Television</option>
<option value="3">End The Suffering</option>
<option value="4">Brian Bilbrey</option>
<option value="5">SummerHill Homes / Yes on A&B</option>
</select>
Thanks a bunch for taking a look! Let me know if there's anything else I can add to make my question more clear.
感谢一堆人的观看！让我知道是否还有其他我可以添加的内容以使我的问题更清楚。
回答by Digital Plane
Try:
尝试：
var options = $('#piece_campaign_id').get(0).options;
or
或者
var options = $('#piece_campaign_id')[0].options;
As you were using a jQuery object, which doesn't have an optionsproperty. Also, make sure to include the id selector (#).
由于您使用的是没有options属性的 jQuery 对象。另外，请确保包含 id 选择器 ( #)。
回答by John Hartsock
The following code in is not accurate.
以下代码中的不准确。
var options = $('piece_campaign_id').options;
Should be
应该
var options = $('#piece_campaign_id')[0].options;
You will notice two changes.
你会注意到两个变化。
- The addition of the
#in the selector - The addition of the
[0]after the jQuery object.
- 的添加
#在选择 - 的加入
[0]jQuery对象之后。
In jQuery to select an element by an ID you need to append # before the idvalue (which is similar to CSS. Here is some reference http://api.jquery.com/id-selector/
在 jQuery 中，要通过 ID 选择元素，您需要在 idvalue 之前附加 #（类似于 CSS。这是一些参考http://api.jquery.com/id-selector/
The next issue was you were trying to access a property that does not exist on a jQuery object. optionsis an HTML DOM property. Because of this you must access the DOM Object from inside the jQuery Object.
下一个问题是您试图访问 jQuery 对象上不存在的属性。options是一个 HTML DOM 属性。因此，您必须从 jQuery 对象内部访问 DOM 对象。
var options = $('#piece_campaign_id') //Returns jQuery Object
var options = $('#piece_campaign_id')[0] //Returns HTML DOM Object
//The line above will return the same as
var options = document.getElementById('piece_campaign_id')
NOTE
笔记
The following Selectors in your code are most likely inaccurate
您代码中的以下选择器很可能不准确
$('campaign_field').hide();
...
$('campaign_field').show();
回答by Joseph Marikle
$('piece_campaign_id')
needs to be
需要是
$('#piece_campaign_id')
