Question

我正在尝试按照本教程（http://railscasts.com/episodes/88-dynamic-select-menus）获取使用RoR的动态选择框。无需担心RoR位，这是一个特定于Javascript的问题。

每次运行此函数时，都会收到“options”未定义的错误。我已经尝试在控制台中手动运行该命令，但无论如何，它都是未定义的。我完全按照我在教程中看到的那样打字，但不知怎的，它对我不起作用......

这是有问题的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();
}
}

以下是它正在尝试使用的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&amp;B</option>
</select>

非常感谢大家一起来看看！让我知道是否还有其他任何内容可以让我的问题更清楚。

Answer 1

尝试：

var options = $('#piece_campaign_id').get(0).options;

或

var options = $('#piece_campaign_id')[0].options;

当您使用的jQuery对象没有options属性时。另外，请确保包含ID选择器（#）。

Answer 2

以下代码不准确。

 var options = $('piece_campaign_id').options;

应该是

 var options = $('#piece_campaign_id')[0].options;

你会注意到两个变化。

在选择器中添加#
在jQuery对象之后添加[0]。

在jQuery中按ID选择一个元素你需要在idvalue之前附加＃（类似于CSS。这里有一些参考http://api.jquery.com/id-selector/

下一个问题是您试图访问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')

注意

代码中的以下选择器很可能不准确

$('campaign_field').hide(); ... $('campaign_field').show();

Answer 3

$('piece_campaign_id')

需要

$('#piece_campaign_id')

当我在选择框上调用.options时，为什么会出现“未定义”？

3 个答案: