85

そのコンテンツをレンダリングできる顧客の c# DropDownList コントロールを作成しました。

ただし、ドロップダウンに 2 レベルのインデントが必要な状況に遭遇しました。

<select>
  <optgroup label="Level One">
    <option> A.1 </option>
    <optgroup label="Level Two">
      <option> A.B.1 </option>
    </optgroup>
    <option> A.2 </option>
  </optgroup>
</select>

ただし、上記のスニペットの例ではLevel Two、 と同じインデント量であるかのようにレンダリングされていLevel Oneます。

私が探しているネストされた optgroup の動作を生成する方法はありますか?

4

12 に答える 12

71

ここの HTML 仕様は本当に壊れています。ネストされた optgroup を許可し、ユーザー エージェントがそれらをネストされたメニューとしてレンダリングすることを推奨する必要があります。代わりに、1 つの optgroup レベルのみが許可されます。ただし、この件に関して次のように言わなければなりません。

ノート。HTML の将来のバージョンでは、ネストされたグループを許可するようにグループ化メカニズムが拡張される可能性がある (つまり、OPTGROUP 要素がネストされる可能性がある) ことを実装者に通知します。これにより、作成者はより豊富な選択肢の階層を表すことができます。

また、ユーザー エージェントは、現在のようにオプトグループの最初のオプション要素の前にタイトルを表示する代わりに、サブメニューを使用してオプトグループをレンダリングし始めることができます。

于 2010-08-05T11:59:10.390 に答える
53

これは問題ありませんが、optgroup にないオプションを追加するとバグが発生します。

<select>
  <optgroup label="Level One">
    <option> A.1 </option>
    <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">
      <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>
    </optgroup>
    <option> A.2 </option>
  </optgroup>
  <option> A </option>
</select>

css を使用して optgroup をすぐに閉じた方がはるかに良いでしょう:

<select>
  <optgroup label="Level One"></optgroup>
  <option style="padding-left:15px"> A.1 </option>
  <optgroup label="Level Two" style="padding-left:15px"></optgroup>
  <option style="padding-left:30px"> A.B.1 </option>
  <option style="padding-left:15px"> A.2 </option>
  <option> A </option>
</select>

于 2010-10-04T11:52:42.623 に答える
49

OK、誰かがこれを読んだことがあるなら: 最善の選択肢は&nbsp;、インデントの余分なレベルごとに 4 つの sを追加することです。

それで： 

<select>
 <optgroup label="Level One">
  <option> A.1 </option>
  <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">
   <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>
  </optgroup>
  <option> A.2 </option>
 </optgroup>
</select>

于 2009-06-24T11:29:41.750 に答える
17 

<style>
  .NestedSelect{display: inline-block; height: 100px; border: 1px Black solid; overflow-y: scroll;}
  .NestedSelect label{display: block; cursor: pointer;}
  .NestedSelect label:hover{background-color: #0092ff; color: White;}
  .NestedSelect input[type="radio"]{display: none;}
  .NestedSelect input[type="radio"] + span{display: block; padding-left: 0px; padding-right: 5px;}
  .NestedSelect input[type="radio"]:checked + span{background-color: Black; color: White;}
  .NestedSelect div{margin-left: 15px; border-left: 1px Black solid;}
  .NestedSelect label > span:before{content: '- ';}
</style>

<div class="NestedSelect">
  <label><input type="radio" name="MySelectInputName"><span>Fruit</span></label>
  <div>
    <label><input type="radio" name="MySelectInputName"><span>Apple</span></label>
    <label><input type="radio" name="MySelectInputName"><span>Banana</span></label>
    <label><input type="radio" name="MySelectInputName"><span>Orange</span></label>
  </div>

  <label><input type="radio" name="MySelectInputName"><span>Drink</span></label>
  <div>
    <label><input type="radio" name="MySelectInputName"><span>Water</span></label>

    <label><input type="radio" name="MySelectInputName"><span>Soft</span></label>
    <div>
      <label><input type="radio" name="MySelectInputName"><span>Cola</span></label>
      <label><input type="radio" name="MySelectInputName"><span>Soda</span></label>
      <label><input type="radio" name="MySelectInputName"><span>Lemonade</span></label>
    </div>

    <label><input type="radio" name="MySelectInputName"><span>Hard</span></label>
    <div>
      <label><input type="radio" name="MySelectInputName"><span>Bear</span></label>
      <label><input type="radio" name="MySelectInputName"><span>Whisky</span></label>
      <label><input type="radio" name="MySelectInputName"><span>Vodka</span></label>
      <label><input type="radio" name="MySelectInputName"><span>Gin</span></label>
    </div>
  </div>
</div>

于 2015-05-24T02:35:41.727 に答える
6

この投稿の上記のブロークンアローのソリューションが本当に気に入っています。ラベルと呼ばれるものを切り替えることができ、オプションとは見なされないように、少し改善/変更しました。私は小さな jQuery を使用しましたが、これは jQuery がなくても実行できます。

中間ラベル (リーフ ラベルなし) をリンクに置き換えました。リンクは、クリック時に関数を呼び出します。この関数は、クリックされたリンクの次の div を切り替えて、オプションを展開/折りたたみます。これにより、階層内の中間要素を選択する可能性が回避されます。これは通常、望ましいことです。中間要素を選択できるバリアントを作成するのは簡単なはずです。

これは変更された html です:

<div class="NestedSelect">
    <a onclick="toggleDiv(this)">Fruit</a>
    <div>
        <label>
            <input type="radio" name="MySelectInputName"><span>Apple</span></label>
        <label>
            <input type="radio" name="MySelectInputName"><span>Banana</span></label>
        <label>
            <input type="radio" name="MySelectInputName"><span>Orange</span></label>
    </div>

    <a onclick="toggleDiv(this)">Drink</a>
    <div>
        <label>
            <input type="radio" name="MySelectInputName"><span>Water</span></label>

        <a onclick="toggleDiv(this)">Soft</a>
        <div>
            <label>
                <input type="radio" name="MySelectInputName"><span>Cola</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Soda</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Lemonade</span></label>
        </div>

        <a onclick="toggleDiv(this)">Hard</a>
        <div>
            <label>
                <input type="radio" name="MySelectInputName"><span>Bear</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Whisky</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Vodka</span></label>
            <label>
                <input type="radio" name="MySelectInputName"><span>Gin</span></label>
        </div>
    </div>
</div>

小さな javascript/jQuery 関数:

function toggleDiv(element) {
    $(element).next('div').toggle('medium');
}

そしてCSS：

.NestedSelect {
    display: inline-block;
    height: 100%;
    border: 1px Black solid;
    overflow-y: scroll;
}

.NestedSelect a:hover, .NestedSelect span:hover  {
    background-color: #0092ff;
    color: White;
    cursor: pointer;
}

.NestedSelect input[type="radio"] {
    display: none;
}

.NestedSelect input[type="radio"] + span {
    display: block;
    padding-left: 0px;
    padding-right: 5px;
}

.NestedSelect input[type="radio"]:checked + span {
    background-color: Black;
    color: White;
}

.NestedSelect div {
    display: none;
    margin-left: 15px;
    border-left: 1px black
    solid;
}

.NestedSelect label > span:before, .NestedSelect a:before{
    content: '- ';
}

.NestedSelect a {
    display: block;
}

JSFiddle でのサンプルの実行

于 2016-12-07T17:41:45.880 に答える
5

構造化された複雑なものがある場合は、単一のドロップダウン ボックス以外のものを検討するかもしれません。

于 2009-06-24T11:36:12.470 に答える
1

標準の最初の発明者は、階層リストではなくグループベースの選択リストを望んでいるようです。残念ながら、将来の HTML 標準では、下位互換性が失われるリスクが高いため、おそらくこれは変更されません。

許容できる場合は、階層リストをセグメント名の付いたグループ リストに変換することが回避策になる場合があります。

<select>
  <optgroup label="Level One">
    <option> A.1 </option>
  </optgroup>
  <optgroup label="Level One / Level Two">
    <option> A.B.1 </option>
  </optgroup>
  <optgroup label="Level One">
    <option> A.2 </option>
  </optgroup>
</select>

順序の変更が許容される場合は、見栄えを良くするために、同じグループ名を持つアイテムをマージすることを検討してください。

<select>
  <optgroup label="Level One">
    <option> A.1 </option>
    <option> A.2 </option>
  </optgroup>
  <optgroup label="Level One / Level Two">
    <option> A.B.1 </option>
  </optgroup>
</select>

両方が受け入れられず、階層的な選択リストが実際に必要な場合は、チェックボックス付きのモーダル ダイアログの実装 (および、Shift キーまたは Ctrl キーによる複数選択用の JavaScript キーボード トラップ) が必要になる場合があります。

于 2021-07-24T14:34:53.833 に答える