如何克服这个错误:无法读取属性'选择'未定义?

时间:2014-11-04 13:17:57

标签: javascript html5 selectize.js

我一直收到js的问题中提到的错误:

  var $filter = $('#share_tags')[0].selectize;

相关的html也附在..



(function() {
	// Extra symbols for our share expression
	var symbols = ['+','|','~','(',')'],
		symbolCount = {};
	// Initialize all symbols count to 0
	symbols.forEach(function(s) {
		symbolCount[s] = 0;
	});
	// our ops
	var ops = [
		{ value: '+', text: 'AND', symbol:true },
		{ value: '|', text: 'OR', symbol: true },
		{ value: '~', text: 'NOT', symbol: true },
		{ value: '(', text: '(', symbol: true },
		{ value: ')', text: ')', symbol: true }
	];

	function getText(value) {
		for(var i = 0, len = ops.length; i < len; i += 1) {
			if (ops[i].value === value) {
				return ops[i].text;
			}
		}
	}

	// User select
	$('#share_with').selectize({
		openOnFocus: false,
	});

	// Tag select
	$('#share_tags').selectize({
		persist: false,
		onItemAdd: function(value, $item) {
			if (symbolCount.hasOwnProperty(value[0])) {
				var value = value[0],
					count = symbolCount[value];
				$filter.addOption({
					value: value + '' + (count+1),
					text: getText(value)
				});
				symbolCount[value] += 1;
				$filter.refreshOptions();
			}
		},
		onItemRemove: function(item) {
			if (symbolCount.hasOwnProperty(item[0]) !== -1) {
				for (opt in $filter.options) {
					if ($filter.options.hasOwnProperty(opt)) {
						if (opt !== item && opt[0] === item) {
							delete $filter.options[opt];
						}
					}
				}
			}
		}
	});

	var $filter = $('#share_tags')[0].selectize;

	$('#shareForm').on('submit', function(e) {
		var tags = $('#share_tags').val(),
			expression = [],
			symbol,
			item;

		for (var i = 0, len = tags.length; i < len; i += 1) {
			item = tags[i];
			if (symbolCount.hasOwnProperty(item[0]) !== -1) {
				symbol = item[0] === '+' ? '&' : item[0];
				expression.push(symbol);
			}
			else {
				expression.push(item);
			}
		}
		$('#share_expression').val(expression.join(''));
	});

	
    $(document).keyup(function(e) {
    if (e.keyCode == 27) { 
        $(".search-card").removeClass("hide");
    }   // esc
    });

    $('.js-share-btn').on('click', function(e) {
        $(".search-card").addClass("hide");
        App.Util.preventDefault(e);
        Avgrund.show("#createShare");
    });

    $('.edit-share-button').on('click', function(e) {
        $(".search-card").addClass("hide");
        App.Util.preventDefault(e);
        Avgrund.show("#createTaskShare");       
        });
    
    $(".js-popup-close").on("click",function () {
        $(".search-card").removeClass("hide");
    });
}());
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
{% set created_tags = [t for t in tags if t.tag.created_by == current_user] %}
<form name="shareForm" id="shareForm" method="post" action="/share/new">
	<fieldset>
		<h3>Share card</h3>
	</fieldset>
	<div class="form-group">
		<label for="share_name">Card name</label>
		<input type="text" class="form-control" name="share_name" id="share_name" required="required">
	</div>
	<div class="form-group">
		<label for="share_tags">Tag</label>
		<select class="form-control" name="share_tags" id="share_tags" required="required" placeholder="Pick a tag to share">
			{% if q[0] == '#' %}
			{% set name, id = q.split("/") %}
			<option value="{{ id }}">{{ name }}</option>
			{% end %}
		</select>
		{#
		<select class="form-control" name="share_tags" id="share_tags" required="required" multiple="multiple" placeholder="Pick a tag to share">
			<option value=""></option>
			<optgroup label="Tags">
				{% for t in created_tags %}
				<option value="{{ t.tag.id }}">{{ t.tag.name }}</option>
				{% end %}
			</optgroup>
			<optgroup label="Filters">
				<option value='+'>AND</option>
				<option value='|'>OR</option>
				<option value='~'>NOT</option>
				<option value='('>(</option>
				<option value=')'>)</option>
			</optgroup>
		</select>
		#}
	</div>
	<div class="form-group">
		<label for="share_with">Share with</label>
		<select class="input-control" name="share_with" id="share_with" required="required" multiple="multiple" placeholder="Choose a few people">
			<option value="">Select a user</option>
			{% for user in contacts %}
				{% if user.id != 1 %}
				<option value="{{ user.id }}">{{ user.name }} &lt;{{ user.email }}&gt;</option>
				{% end %}
			{% end %}
		</select>
	</div>
	{% module xsrf_form_html() %}
	<input type="hidden" name="share_expression" id="share_expression" value="">
	<div class="form-group">
		<button type="submit" class="btn btn-primary share-btn">Share</button>
		<button type="button" class="btn-link js-popup-close">Cancel</button>
	</div>
</form>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

Selectize是一个Jquery插件。如果您不导入它,您将无法使用它。 (这是错误,您的对象没有选择属性)。

您可以看到plugin page,或github

下载here并尝试一下。

请记住添加以下行:

<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />