1

モバイルデバイスに表示されるselect要素があります

<form>
<select id="selectMe" >
    <optgroup label="Australia">
        <option value="AustCars">Australia Cars Report</option>
        <option value="AustBikes">Australia Bikes Report</option>                
    </optgroup>
    <optgroup label="New Zealand">                    
        <option value="NZCars">New Zealand Cars Report</option>
        <option value="NZBikes">New Zealand Bikes Report</option>                
    </optgroup>
</select>
</form>​

注意すべき2つのこと：

  • Australia Cars Reportオーストラリアとニュージーランドの間のあいまいさを取り除くために、閉じたときにフルネームを表示したいと思います。
  • Cars Reportを開いたときに短いバージョンを使用したいのselectは、フルネームAustralia Cars ReportがiPhoneセレクターには長すぎて（実際の名前ではありませんが、Austr...rs Report同じようにレンダリングされます）、国が暗黙的に含まれているためoptgroupです。

私のアプローチ（説明を選択したときに選択リストの表示値を変更することに基づく）は、コントロールがフォーカスを取得したときに各アイテムの値を変更し、フォーカスを失ったときに変更を解除することです。そして、それは私が立ち往生しているところです。

ここで2つの問題があります。

  • フォーカスイベントを取得できますが、「lostfocus」イベントはありません。ユーザーが実際に選択を変更していない可能性があるため、「changed」イベントを使用できません。
  • optgroupオプションテキストに追加および削除するの値を取得する方法がわかりません。Australia Cars Reportこれは、それが下にネストされていることを見つける必要があることを意味しAustraliaます。したがって、表示テキストからその単語を削除できます。

javascriptやjQuery、または該当する場合は他のツールを使用できます。私も見落としていた、これを行う簡単な方法の提案を受け入れてください。

4

3 に答える 3

1

最初の質問については、Steve の回答を参照してください。

2 番目の質問の場合: オーストラリアのテキストがぼやけたらオプションに追加できます

$("select").blur(function(){
   $(this).html($(this).parent().html() + " " + $(this).html());
});
于 2012-07-05T04:23:50.567 に答える
1

focus イベントは取得できますが、「lostfocus」イベントはありません。ユーザーが実際に選択を変更していない可能性があるため、「変更済み」イベントを使用できません。

を使用しblurます。

オプション テキストに追加および削除する optgroup の値を取得する方法がわかりません。

少し不明確ですが、始めるためにいくつかの推測を危険にさらします：

  • 特定のグループに一意にアクセスするための ID を与える必要があります。

    var fooElement = document.getElementById("foo")

  • を使用して、選択したオブジェクトを取得できますfooElement.selected
  • を使用してすべてのオプションを取得できますfooElement.options[]。このリストに新しい DOM 要素を追加または削除すると、HTML DOM でそれらが追加または削除されます。
  • の値は、またはoptionを使用して見つけることができます。.value.text

selectHTML でタグを検索し、JavaScript でそのタイプの要素を操作してみてください。幸運を。

于 2012-07-05T04:17:05.467 に答える
1 
$('#selectMe option').click(function(){
    var myparent = $(this).parent();
    if (myparent.get(0).tagName == 'OPTGROUP'){
        $(this).text(myparent.attr('label') + ' ' + $(this).text());
    }
});

$('#selectMe').focus(function(){
    $('option', this).each(function(){
        var myparent = $(this).parent();    
        $(this).text($(this).text().replace(myparent.attr('label'),''));     
    });
})

ここで動作するデモhttp://jsfiddle.net/GXvJB/11/

于 2012-07-05T04:34:06.263 に答える