1

我有一些代码可以动态地将 ID 分配给 HTML 元素。

我编写了额外的代码来使用此 ID 属性来更改文本，因为用户从 SELECT 框中选择不同的选项。

这是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
4

3 回答 3

3

以下对我来说很好。我认为这是因为您使用.html的.text是select.

IE：var selectedtext = $("#contact_types option:selected").text();而不是var selectedtext = $("#contact_types option:selected").html();

演示：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");
            }); 

        }
    });

至：

//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;      
        }
    });
 });

至：

$("#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 崩溃。

于 2013-07-01T15:41:37.363 回答
2

从控制台输出中，我看到您选择HTMLScriptElement的不是HTMLLabelElement. 显然，您已经设置id了 HTML 的脚本元素。

于 2013-07-01T15:45:53.100 回答
0

我试过你的代码，它可以工作。

我在想的是：如果您在选项的 html 中有任何空格、换行符等，它将与您的 select 语句中的任何内容都不匹配。我建议使用 selectedtext = $.trim(selected text.toUpperCase());

那应该可以解决它（希望如此！）

于 2013-07-01T15:56:28.763 回答