将dropdownchecklist合并到JQuery-UI表格中

Question

我试图将dropdownchecklist合并到表单中，并且无法正确显示DDCL。这是一个小提琴，只显示DDCL working as expected。我已经将它合并到JQuery-UI modal form的一个修改示例中，并对选择器进行了细微更改，这里是小提琴：Non-working example I'm trying to fix.它不提供可用的DDCL，只是一个小小的盒子。点击“添加新仪器”按钮查看我在说什么。

下面是代码的HTML片段我有参考这里SO（请参阅“非工作例子......”上面全码）：

<form> 
<fieldset> 
<label for="modelNumber">Model Number</label> 
<input type="text" name="modelNumber" id="modelNumber" class="text ui-widget-content ui-corner-all" /> 
<label for="partNumber">Part Number</label> 
<input type="text" name="partNumber" id="partNumber" value="" class="text ui-widget-content ui-corner-all" /> 
<label for="serialNumber">Serial Number</label> 
<input type="text" name="serialNumber" id="serialNumber" value="" class="text ui-widget-content ui-corner-all" /> 
<label for="services">Requested Services</label> 
<select id="services" name="services" multiple="multiple"> 
    <optgroup label="Calibration"> 
     <option>Temperature</option> 
     <option>Conductivity</option> 
     <option>Pressure</option> 
     <option>Dissolved Oxygen</option> 
     <option>pH</option> 
    </optgroup> 
    <optgroup label="Repairs"> 
     <option>O-Ring Replacement &amp; Inspection</option> 
     <option>Hydrostatic Test</option> 
     <option>Diagnose &amp; Repair Problems</option> 
     <option>Replace Anti-Foulant Devices</option> 
     <option>Download Data From Instrument</option> 
    </optgroup> 
    <optgroup label="Third Party Sensors"> 
     <option>Fluorometer</option> 
     <option>Transmissometer</option> 
     <option>Turbidity</option> 
     <option>SUNA</option> 
     <option>PAR</option> 
    </optgroup> 
</select> 
</fieldset> 
</form> 

这里的，使得它的工作JS ：

$(document).ready(function() { 
$("#services").dropdownchecklist(); 
}); 

我在想什么？我可以看到在标签下面呈现了一些东西，但它只是一个很小的盒子，而不是我期待的下拉框。我怀疑这可能是互相冲突的CSS？我已经删除了页面CSS并获得了大部分相同的结果（在所有情况下都是不可用的小框），并且我很确定外部资源在两个小提琴上都是相同的，尽管可能不是相同的顺序。我已经添加了&删除了其中的大部分并进行了测试，所以我非常确定外部资源不是问题，但不打折。

Answer 1

它与对话框形式的位对你的select元素有什么关系。 您必须首先将select变成ddcl，然后调用对话框形式的位。在$（“＃services”）后面的整个$（“＃dialog-form”）。对话框（{...}）位dropgingchecklist（）;在$（文件）。就绪...

$(document).ready(function() { 
    $("#services").dropdownchecklist(); 
    $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 350, 
     width: 350, 
     modal: true, 
     buttons: { 
     "Add Instrument": function() { 
      var bValid = true; 
      allFields.removeClass("ui-state-error"); 

      bValid = bValid && checkLength(modelNumber, "modelNumber", 1, 7); 
      bValid = bValid && checkLength(partNumber, "partNumber", 0, 8); 
      bValid = bValid && checkLength(serialNumber, "serialNumber", 1, 8); 

      bValid = bValid && checkRegexp(modelNumber, /^[0-9]+[-]*[a-z]*[0-9]*[a-z]*$/i, "Model numbers consist of 0-9, a-z, hyphens, and begin with a number."); 
      bValid = bValid && checkRegexp(partNumber, /^[0-9]*[-]*[a-z]*[0-9]*[a-z]*$/i, "Part numbers consist of 0-9, a-z, hyphens, and begin with a number, however there may not be one on your instrument, so leave this blank."); 
      bValid = bValid && checkRegexp(serialNumber, /^[0-9]*[-]*[a-z]*[0-9]*[a-z]*$/i, "Serial numbers can concist of 0-9, a-z, hyphens, and begin with a number or letter."); 

      if (bValid) { 
      $("#users tbody").append("<tr>" + 
       "<td>" + modelNumber.val() + "</td>" + 
       "<td>" + partNumber.val() + "</td>" + 
       "<td>" + serialNumber.val() + "</td>" + 
       "<td>" + services.val() + "</td>" + 
      "</tr>"); 
      $(this).dialog("close"); 
      } 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     }, 
     close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
     } 
    }); 
    $("#create-user") 
     .button() 
     .click(function() { 
     $("#dialog-form").dialog("open"); 
     }); 
}); 

这里的小提琴： http://jsfiddle.net/Mq7aC/6/