0

ユーザーが衣料品のカテゴリを選択できるようにする選択ボックスがあります。カテゴリにはサブカテゴリを含めることができるので、その階層を表示するために、次のようにオプションを記述します。

Category Name
  ├─ Sub-category name

次のようになります。

種別名

  ├─ サブカテゴリー名

残念ながら、ユーザーがサブカテゴリを選択すると、選択ボックスに表示されるテキストに構造文字が含まれます。オプションが選択されたときにカテゴリ名のみを表示し、オプションが変更されたときに構造の HTML を保持するにはどうすればよいですか? オプション内のカテゴリの階層を表示するより良い方法はありますか? ユーザーは最上位のカテゴリも選択できる必要があるため、Optgroups は私には機能しません。

これが今の様子です。

http://jsfiddle.net/K6yfp/

4

2 に答える 2

0

私は簡単な解決策を思いつきましたが、それ以上のことはできませんでした。お役に立てば幸いです。

HTML

<select id="Categories">
    <option value="Shoes">Shoes</option>
    <option value="Sneakers">&nbsp;&nbsp;&#x251c;&#x2500;Sneakers</option>
</select>

JS

$(document).ready(function(){
    var SelectedCategory = $('#Categories').find('option:selected').val();
    $('#Categories').bind("change",function() {
        $(this).find('option:selected').attr('label',$(this).find('option:selected').val());
        SelectedCategory = $(this).find('option:selected').val();
        $(this).blur();
    });

    $('#Categories').focus(function(e){
        e.stopPropagation();
        $(this).find('option:selected').removeAttr('label');
    }).blur(function(e){
        e.stopPropagation();
        $(this).find('option:selected').attr('label',$(this).find('option:selected').val());
    });
});

注: jQueryライブラリを含めることを忘れないでください。

デモ Fiddleを確認してください。

于 2013-09-11T08:03:55.190 に答える
0

おそらくあなたが探しているoptgroup

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

フィドル

于 2013-09-11T05:24:04.257 に答える