选择属性在更改选择元素后未更改
Select attribute not changed after change of select element
我有一个表格,其中有几列包含选择元素。在 tfoot 中,我为每行都有一个输入元素,用于根据选择元素中的选定值过滤行。
当加载表并使用选择直接过滤列时,它工作并且表被过滤。
但是,在选择元素中进行更改时,filter 函数不会注意到该值已更改。
检查html,我可以看到"selected"属性仍然在加载时选择的选项上。因此,在进行实际更改时不会更新(在FF和Chrome中标识)。
但是从jQuery中,搜索选定的值(.find(":selected")
)是有效的。所以我认为我可以使用它来查找值,然后将所选属性设置为所选的任何属性。这就是我尝试这样做的方式:
$("select[id^='qu_owner']").live('change', function (e) {
var owner = $(this).val();
console.log(owner);
var ticketid = $(this).attr('id').substr(9);
$($(this) + " option[value=" + owner + "]").attr("selected", "selected"); //Update: this has been removed
});
但所选属性仍未在元素中更新。
任何线索如何做到这一点?我需要过滤才能工作,它正在查看选定的属性。是否可以对选择元素进行这种更新?
更新
好的,根据下面的评论和答案,我知道有更好的方法来做我上面所做的。所以不要使用 $(this).find(":selected").val();我现在使用 $(this).val();。另外,我确实删除了最后一行,因为我知道不应该尝试设置所选属性。
而且,我现在明白我遇到实际问题的代码是过滤器功能。这是针对数据表的,所以它是一个插件,但这是重要的部分:
aData[i] 是实际的表格单元格。因此,它只是文本,但在这种情况下,它是我的选择元素的文本。我认为下面的方向是正确的,但仍然不起作用(检查控制台.log行旁边的评论):
function( oSettings, aData, iDataIndex ) {
var ret = true;
//Loop through all input fields i tfoot that has class 'sl_filter' attached
$('tfoot .sl_filter').each(function(i, obj){
//$(this) can be used. Get the index of this colum.
var i = $("tfoot input").index($(this));
//Create regexp to math
var r = new RegExp($(this).val(), "i");
//Get the selected option from the column
console.log($(aData[i]).attr('id')); //Properly prints the ID
console.log($(aData[i] + " option:selected").text()); //Prints all options, not only the selected on
console.log($(aData[i] + " option:selected").val()); //Prints the value of the id that was selected when data was loaded, even if a new option has been chosen
console.log($(aData[i]).val()); //Prints the value of the id that was selected when data was loaded, even if a new option has been chosen
var str = $(aData[i] + " option:selected").text();
/*Test to see if there is a match or if the input value is the default
(the initial value of input before it has any fokus/text) */
if(r.test(str) || $(this).val()=="Search"){
//Return true only exits this function
return true;
}else{
/*Return false returns both function an .each. Retain 'false' in a variable scoped
to be reached outside the .each */
ret = false;
return false;
}
});
//Return true or false
return ret;
}
这是我需要掌握的选定元素的文本。这就是应该过滤的内容。我该怎么做?
更新
为了缩小范围,我创建了一个包含必要内容的 jsfiddle。这都是关于如何从所选选项中提取文本:jsfiddle
aData[i] = 表格单元格。在jsfiddle中,我使用"sel"作为单元格内容的变量。sel 的文本是从 aData[i] 复制的。
无需更改<option>
的属性 - 它应该包含从服务器下载的元素的原始状态。
您的过滤器应检查所选选项的selected
属性,例如:
.filter(function() {
return this.selected; // check the boolean property
})
这也是伪选择器:selected
的工作方式 - 它检查属性的当前值,而不是属性。
请注意,在 <select>
元素的change
处理程序中,只需使用 this.value
即可获取当前选定的值。
$('select').on('change', function() {
// current value
var value = this.value;
// text of the currently selected option.
var text = this.options[this.selectedIndex].text;
}
- WebdriverIO waitForExist()选择元素's选定的选项
- 如何选择元素的第n个子元素
- Angular没有根据模型更新我的选择元素
- jquery使用name from变量按类选择元素
- 如何使用jQuery按数据日期属性选择元素
- 向html选择元素添加选项
- 使用Jquery在相同类型的元素中选择元素
- 他们是如何使用angular/jqLite find()方法按属性名称和值选择元素的?ng conf 2015
- 如何在Angular中清除选择元素中的过滤器
- 使用其中一个元素作为参考点,从Javascript数组中选择元素
- Javascript选择元素到字符串的比较
- Angular始终选择选择元素中的第一个选项
- 使用 jquery .find() 遍历按类和存储属性选择元素
- 通过 id json, jquery 选择元素
- 如何基于另一个已经存在的选择器选择元素
- 禁用多个选择元素中的非“选定”选项,但使用 jquery 的一个除外
- HTML 选择元素的只读等效项
- 在iPad上,如何通过Javascript事件在选择元素上设置focus()而不显示选项
- 单击事件似乎不适用于 IE 中的选择元素
- Angular js,在选择元素上,我想 POST 数据以将其保存在数据库中,然后我想使用 PUT 更新它而无需重新加载