我有一些代码可以动态地为HTML元素分配ID。
我已经编写了额外的代码来使用此ID属性来更改文本，因为用户从SELECT Box中选择了不同的选项。
这是HTML：
<DT>Contact Type</DT>
<DD>
<select name="contact_types" id="contact_types" ><option selected value="" ></option></select>
<P CLASS="descr"></P>
</DD>
<DT>change me dynamically</DT>
<DD>
<input class=" text" type="text" name="contact_details" value="" id="contact_details" >
<P CLASS="descr"></P>
</DD>
以下是在文档加载后立即查找相关标签的代码，并指定ID：
$(document).ready(function() {
//find element that has generic text and assign an id.
$('body :contains("change me dynamically")').contents().each(function () {
var exp = /change me dynamically/;
if (this.nodeValue && exp.test(this.nodeValue)) {
var $parent = $(this).parent().attr('id', 'contactTypeLabel');
$parent.text(function(_, text){
return text.replace(exp, "Phone Number");
});
}
});
这是试图更改刚刚分配了id的标签文本的代码：
$("#contact_types").live("change",function() {
var selectedtext = $("#contact_types option:selected").html();
selectedtext = selectedtext.toUpperCase();
alert(selectedtext);
switch(selectedtext)
{
case 'EMAIL':
$('#contactTypeLabel').text("eMail Address:");
break;
case 'MOBILE PHONE':
$('#contactTypeLabel').text("Phone Number:");
break;
case 'VOICE MAIL':
$('#contactTypeLabel').text("Number / Extension:");
break;
}
});
});
当我测试这个逻辑时，标签不会改变，因为我从下拉框中选择了不同的选项。 但我在控制台中也没有任何错误.... 我尝试过使用IE和Firefox。 我也尝试使用.html方法而不是标签的.text。但那也不起作用。
关于我可能做错的任何想法？
感谢。
编辑1
当我输入：
$('#contactTypeLabel')
进入控制台，我收到以下文字：
>> $('#contactTypeLabel');
{
0 : [object HTMLScriptElement],
length : 1,
context : [object Document],
selector : "#contactTypeLabel",
constructor : function(a,b){return new d.fn.init(a,b,g)},
init : function(a,e,f){var g,i,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!e&&c.body){this.context=c,this[0]=c.body,this.selector="body",this.length=1;return this}if(typeof a==="string"){g=h.exec(a);if(!,
jquery : "1.5.2",
size : function(){return this.length},
toArray : function(){return C.call(this,0)},
get : function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]}
...
}
Add to watch
编辑2
作为测试，我更改了分配ID的jquery，如下所示：
//find element that has generic text and assign an id.
$('body :contains("change me dynamically")').contents().each(function () {
var exp = /change me dynamically/;
if (this.nodeValue && exp.test(this.nodeValue)) {
var $parent = $(this).parent().attr('id', 'contactTypeLabel');
$('#contactTypeLabel').text("Number / Extension:");
}
});
果然，它不起作用...... 也许ID没有被正确分配？
编辑3
下拉列表由ajax调用填充，如下所示：
$.getJSON(
url = myurl,
function(data) {
sessionStorage.setItem("voicecontacttypes", data); //save as string data.
data = $.parseJSON(data);
if (data !=null) {
$.each(data, function(i) {
$('#contact_types')
.append($("<option></option>")
.attr("value",this.id)
.text(this.description));
}); //end .each
}//end if
}//end data
);//end getJSON
答案 0 :(得分：3)
以下对我来说很好。我认为这是因为.html使用.text代替select。
IE：var selectedtext = $("#contact_types option:selected").text();而不是var selectedtext = $("#contact_types option:selected").html();
DEMO：http://jsfiddle.net/abc123/jSfgn/3/
JS：
变化：
//find element that has generic text and assign an id.
$('body :contains("change me dynamically")').contents().each(function () {
var exp = /change me dynamically/;
if (this.nodeValue && exp.test(this.nodeValue)) {
var $parent = $(this).parent().attr('id', 'contactTypeLabel');
$parent.text(function(_, text){
return text.replace(exp, "Phone Number");
});
}
});
TO：
//find element that has generic text and assign an id.
$('body > DT :contains("change me dynamically")').contents().each(function () {
var exp = /change me dynamically/;
if (this.nodeValue && exp.test(this.nodeValue)) {
var $parent = $(this).parent().attr('id', 'contactTypeLabel');
$parent.text(function(_, text){
return text.replace(exp, "Phone Number");
});
}
});
JS：
变化：
$("#contact_types").live("change",function() {
var selectedtext = $("#contact_types option:selected").html();
selectedtext = selectedtext.toUpperCase();
alert(selectedtext);
switch(selectedtext)
{
case 'EMAIL':
$('#contactTypeLabel').text("eMail Address:");
break;
case 'MOBILE PHONE':
$('#contactTypeLabel').text("Phone Number:");
break;
case 'VOICE MAIL':
$('#contactTypeLabel').text("Number / Extension:");
break;
}
});
});
TO：
$("#contact_types").live("change", function () {
var selectedtext = $("#contact_types option:selected").text();
selectedtext = selectedtext.toUpperCase();
alert(selectedtext);
switch (selectedtext) {
case 'EMAIL':
$('#contactTypeLabel').text("eMail Address:");
break;
case 'MOBILE PHONE':
$('#contactTypeLabel').text("Phone Number:");
break;
case 'VOICE MAIL':
$('#contactTypeLabel').text("Number / Extension:");
break;
}
});
请将您的JS更改为以下内容执行Ajax：
$.getJSON(url = myurl, function (data) {
sessionStorage.setItem("voicecontacttypes", data); //save as string data.
data = $.parseJSON(data);
if (data != null) {
var html = '';
$.each(data, function (i) {
html = html + "<option value=\"" + this.id + "\">" + this.description + "</option>";
}); //end .each
$('#contact_types').html(html);
} //end if
} //end data
); //end getJSON
原因：这使得紧密嵌套的for循环只访问DOM 1次而不是1次返回，这将使许多浏览器减速，如果有超过1000个选项它可以崩溃IE。
答案 1 :(得分：2)
在控制台输出中，我看到您选择了HTMLScriptElement而不是HTMLLabelElement。显然，您已为HTML的脚本元素设置了id。
答案 2 :(得分：0)
我尝试了你的代码，但它确实有效。
我的想法是：如果你在选项的html中有任何空格，换行符等，它将与你的select语句中的任何内容都不匹配。我建议使用selectedtext = $ .trim（select text.toUpperCase（））;
应该修复它（希望！）