Question

CSS不适用于动态添加的选择列表。但是，当我对选择列表进行硬编码时，它会正确应用。所以我在我的代码中做错了。请告诉我。

$('#multiple-label-example').append(
    '<option>'+skillsObj[cnt].skillName+'</option>'
);

CSS不适用于上述行。但它适用于硬编码选择列表。

var url= "/ajax/gDirectory/getAllskills.htm";
         $.ajax({
            type: "POST",
             url: url,
            contentType: "text/html; charset=utf-8",
            async: true,
            success : function(result1) {
                var skillsObj = JSON.parse(result1);
                $('#tabpage_4').append("<div class='side-by-side clearfix'></div><table><tr><td><h3>Skills & Expertise  :</h3></td><td id='skillstd'><select data-placeholder='Type skills here'  multiple class='chosen-select' style='width:300px;' tabindex='18' id='multiple-label-example'></select></td></tr></table>");
                for (cnt = 0; cnt < skillsObj.length; cnt++) 
                    $('#multiple-label-example').append('<option>'+skillsObj[cnt].skillName+'</option>');
            }
          }); 

          (function($){
              var config = {
                      '.chosen-select'           : {},
                      '.chosen-select-deselect'  : {allow_single_deselect:true},
                      '.chosen-select-no-single' : {disable_search_threshold:10},
                      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                      '.chosen-select-width'     : {width:"95%"}
                    }

                 for (var selector in config) {
                       $(selector).chosen(config[selector]);
                      }  

              })(jQuery132);
          document.getElementById("smallimagesDiv4").style.display="none";

Answer 1

在成功功能上，您必须再次激活所选的更新方法，因此可以更新动态添加的选项。

Answer 2

shyamji是对的。您必须触发所选：更新如下：

                 target.trigger("chosen:updated");

CSS不适用于动态创建的html

2 个答案: