0

我正在尝试将下拉清单合并到表单中，但无法正确显示DDCL 。这是一个小提琴，显示了 DDCL按预期工作。我已将其合并到JQuery-UI 模态表单的修改示例中，对选择器进行了细微更改，这就是小提琴： 我正在尝试修复的非工作示例。 它不会呈现可用的 DDCL，而只是一个小盒子。单击“添加新仪器”按钮以查看我在说什么。

这是我在 SO 上参考的代码中的 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 并获得了几乎相同的结果（在所有情况下都无法使用小盒子），而且我很确定两个小提琴上的外部资源是相同的，尽管可能顺序不同。我已经添加和删除了大部分并进行了测试，所以我很确定外部资源不是问题，尽管不要打折。

4

1 回答 1

1

它与对话框形式位对您的选择元素的作用有关。您必须首先将选择放入 ddcl，然后调用对话框形式位。

只是 $("#services").dropdownchecklist(); 之后的整个 $("#dialog-form").dialog({...}) 位 在你的 $(document).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/

于 2013-05-17T22:05:55.827 回答