1

同僚から、JavaScript を使用せずに開始オプション タグと終了オプション タグの間のテキストではなく、選択ボックス オプション タグの値を表示する方法を知っているかどうか尋ねられました。これを達成する方法が見つかりませんでした。これを行う方法はありますか？

サンプルコードは次のとおりです。 

<select name="ctl00$ctl00$ContentMain$contentbody$ddlCFDA"     id="ContentMain_contentbody_ddlCFDA" class="wide">
<option value=""> --- Select CFDA --- </option>
<option value="93.003">93.003    Disaster Relief</option>
<option value="93.101">93.101    PPW</option>
<option value="93.102">93.102    RWC</option>
<option value="93.104">93.104    Comp Comm Mntl Hlth Serv (Sed)</option>
<option value="93.109">93.109    Link</option>
<option value="93.119">93.119    Technical Asst Ctr Evaluation</option>
<option value="93.120">93.120    MH Serv For Cuban Entrants</option>
<option value="93.122">93.122    RRCD</option>
<option value="93.125">93.125    MH Planning &amp; Demonstration</option>
<option value="93.128">93.128    MH Statistics Improvement Prog</option>
<option value="93.131">93.131    ATTC</option>
<option value="93.132">93.132    Managed Care (MC)</option>
<option selected="selected" value="93.138">93.138    P&amp;A For Individuals With Mental Illness</option>
<option value="93.144">93.144    High-Risk Youth Population</option>
<option value="93.148">93.148    Demonstration Prog Homeless</option>
<option value="93.150">93.150    PATH</option>
<option value="93.169">93.169    </option>
<option value="93.170">93.170    CYAP</option>
<option value="93.171">93.171    Block Grant</option>
<option value="93.174">93.174    Conference Grants</option>
<option value="93.175">93.175    Wrap Around</option>
<option value="93.179">93.179    SP-SD</option>
<option value="93.194">93.194    Community Partnership Grant</option>
<option value="93.195">93.195    </option>
<option value="93.196">93.196    Target Cities (TC)</option>
<option value="93.216">93.216    HIV/AIDS Demonstration Prog</option>
<option value="93.218">93.218    Subst Abuse Treatment Conference Grants</option>
<option value="93.229">93.229    </option>
<option value="93.230">93.230    KDA</option>
<option value="93.238">93.238    </option>
<option value="93.239">93.239    Policy Research and Evaluation Grants (ASPE)</option>
<option value="93.242">93.242    </option>
<option value="93.243">93.243    Programs of Regional and National Significance</option>
<option value="93.244">93.244    MH Clinical Or Serv Related Tr</option>
<option value="93.274">93.274    Clinical Training Grant/FD</option>
<option value="93.275">93.275    Access to Recovery Grants</option>
<option value="93.276">93.276    ONDCP Drug Free Communities</option>
<option value="93.901">93.901    Communications Coop Agreements</option>
<option value="93.902">93.902    Critical Population (CP)</option>
<option value="93.903">93.903    Criminal Justice (CJN)</option>
<option value="93.911">93.911    Campus</option>
<option value="93.937">93.937    </option>
<option value="93.949">93.949    HIV/AIDS</option>
<option value="93.950">93.950    Capacity Expansion (CP)</option>
<option value="93.958">93.958    CMHS Block Grant</option>
<option value="93.959">93.959    SAPT Block Grant</option>
<option value="93.982">93.982    Disaster Assistance &amp; Emerg</option>
<option value="93.992">93.992    Block Grant</option>

</select>
4

1 に答える 1

2

実際には、CSSで実行することはできません（可能であれば、CSSで実行する必要がある理由を理解するのは困難です）。

理論的には、原則として、生成されたコンテンツを使用して要素コンテンツの後にコンテンツを追加できます。

option:after { content: attr(value); }

optionしかし、人気のあるブラウザの中で、Firefoxは要素の生成コンテンツをサポートする唯一のブラウザのようです。

さらに理論的には、生成されたコンテンツメカニズムに提案された拡張機能を使用してコンテンツを置き換えることができます。

option { content: attr(value); }

ただし、この拡張機能は一般に（疑似要素だけでなく、実際の要素に使用）contentOperaでのみサポートされているようであり、要素ではサポートされていません（または生成されたコンテンツはまったくサポートされていません）。:before:afteroption

于 2012-08-13T20:29:07.443 に答える