I am not very good at Jquery. I am trying to add ID to a hidden field when user selects an Autocomplete Item
HTML
<input type="hidden" value="" name="CountryId" id="CountryId">
Javascript
$(document).ready(function () {
$("#Country").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Address.mvc/CountryList", type: "POST", dataType: "json",
data: { searchText: request.term, maxResults: 10 },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Value, value: item.Value, id: item.Key }
}))
}
})
},
select: function (event, ui) {
alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id) : "Nothing selected, input was " + this.value);
$('#CountryId').val = ui.item.id;
console.log($('#CountryId').val + ' has faded!');
},
change: function (event, ui) {
alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id) : "Nothing selected, input was " + this.value);
$('#CountryId').val = ui.item.id;
console.log($('#CountryId').val+'has faded!')
}
});
Console shows the value to be
function (value)
{ if (!arguments.length)
{ var elem = this[0];
if (elem)
{ if (jQuery.nodeName(elem, "option"))
{ var val = elem.attributes.value; return !val || val.specified ? elem.value : elem.text;}
if (jQuery.nodeName(elem, "select"))
{ var index = elem.selectedIndex, values = [], options = elem.options, one = elem.type === "select-one";
if (index < 0) { return null; }
for (var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++)
{ var option = options[i];
if (option.selected && (jQuery.support.optDisabled ? !option.d开发者_StackOverflow中文版isabled : option.getAttribute("disabled") === null) && (!option.parentNode.disabled || !jQuery.nodeName(option.parentNode, "optgroup")))
{ value = jQuery(option).val();
if (one) { return value; }
values.push(value);
}
} return values;
}
if (rradiocheck.test(elem.type) && !jQuery.support.checkOn)
{ return elem.getAttribute("value") === null ? "on" : elem.value;
}
return (elem.value || "").replace(rreturn, "");
}
return undefined;
}
var isFunction = jQuery.isFunction(value);
return this.each(function (i)
{var self = jQuery(this), val = value;
if (this.nodeType !== 1) {return;}
if (isFunction) {val = value.call(this, i, self.val());}
if (val == null) {val = "";} else if (typeof val === "number") {val += "";}
else if (jQuery.isArray(val)) {val = jQuery.map(val, function (value) {return value == null ? "" : value + "";});}
if (jQuery.isArray(val) && rradiocheck.test(this.type)) {this.checked = jQuery.inArray(self.val(), val) >= 0;}
else if (jQuery.nodeName(this, "select")) {var values = jQuery.makeArray(val);
jQuery("option", this).each(function () {this.selected = jQuery.inArray(jQuery(this).val(), values) >= 0;});
if (!values.length) {this.selectedIndex = -1;}} else {this.value = val;}
});
}
has faded!
The val seems bring function val from JQuery core script back instead of value of the hidden field.
What am I doing wrong?
Setting a value is done by putting the value in parentheses instead of an equals sign: http://www.w3schools.com/jquery/html_val.asp
so instead of
$('#CountryId').val = ui.item.id;
try
$('#CountryId').val(ui.item.id);
精彩评论