0

ドロップダウン チェックリストをフォームに取り込もうとしていますが、DDCLを正しく表示できません。これは、期待どおりに動作する DDCL だけを示すフィドルです。セレクターに小さな変更を加えて 、 JQuery-UI モーダル フォームの修正例にそれを組み込みました。 使用可能な DDCL をレンダリングするのではなく、代わりに小さな小さなボックスをレンダリングします。「Add New Instrument」ボタンをクリックして、私が話していることを確認してください。

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

ダイアログフォームビットがselect要素で行うことと関係があります。最初に選択を ddcl にし、次にダイアログ フォーム ビットを呼び出す必要があります。

ただ、$("#dialog-form").dialog({...}) ビット全体が $("#services").dropdownchecklist(); の後にあります。あなたの $(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 に答える