Question

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

以下是我在此处参考的代码中的HTML代码段（请参阅上面的“非工作示例...”以获取完整代码）：

<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并获得了大致相同的结果（在所有情况下都无法使用小盒子），而且我非常确定外部资源在两个小提琴上是相同的，尽管可能不是相同的顺序。我添加了＆amp;删除了大部分内容并进行了测试，所以我很确定外部资源不是问题所在，尽管不要打折。

Answer 1

它与对话框表单位对select元素的作用有关。你必须首先将select变成ddcl，然后调用对话框形式的位。

只是整个$（“＃dialog-form”）。对话框（{...}）位于$（“＃services”）之后.dropdownchecklist（）;在你的$（文件）.ready ...

$(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/

将dropdownchecklist合并到JQuery-UI表单中

1 个答案: