web-dev-qa-db-ja.com

<span />タグを<option />タグ内に配置するのは良くありません。スタイリングではなく文字列操作のためだけですか？

_<option />_タグのテキストコンテンツのグループを作成したいと思います。次のようなものがあるとします：<option>8:00 (1 hour)</option>、時間パターン_8:00_を変更でき、括弧内のテキスト_(1 hour)_も変更できます。

私は次のようなことをすることを考えていました

_<option>
  <span>8:00</span>
  <span> (1 hour)</span>
</option>
_

_<span />_タグを_<option />_タグ内に配置するのは良くありません。スタイリングではなく文字列操作のためだけですか？

tagsoptionhtml
51
Rubens Mariuzzo

HTML 4.01仕様から：

_<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->
_

HTML 5ドラフト仕様から：

コンテンツモデル：テキスト。

（HTML 3.2およびHTML 2の仕様でも、<!ELEMENT OPTION - O (#PCDATA)*>と書かれています）

オプション要素に子要素を含めることはできません。はい、それは悪いです。

79
Quentin

Javascriptプラグインを使用して、この制限を克服できます。たとえば、jQueryプラグイン "Select2" Select2プラグインホームページ 。私はいくつかのプロジェクトで使用していますが、かなり柔軟で便利だと思います。

それらの多くがありますが、それらはまったく同じことを行います-従来の<select> into <div>ブロックは追加機能を備えています。

4
Ivan Yaremchuk

option要素

コンテンツモデル：テキスト

いいえ、大丈夫ではありません。必要に応じて値を再構成できるように、スクリプト内で値を保持することを検討してください。

2
Josh Lee

これを行うには、<select>の代わりにHTMLを使用することをお勧めします。

2
Diodeus - James MacFarlane

他の人によって確立されたように、私は<b>と他のタグを試しましたが、<option>はその中にタグを取りません。

<span>タグ内で<option>を使用できないため、できること
インデックス番号を使用して、テキストを抽出することができます
document.getElementById（selectid）.options [x] .textここで、xは変数としての関連インデックスです。

次に、「（」を使用して変数を時間に分割し、最後の文字も削除して「）」を削除します

サンプル：

    <script type="text/javascript">
    function extractSelectText()
    {
    var text = document.getElementById("main").options[1].text
    /* 
    var tlength = text.length
    var splitno = tlength - 1
    var text2 = text.slice(0, splitno)
    var textArray = text2.split(" )")
    var time = textArray[0]
    var hours = textArray[1]
    }
    </script>

変更ははるかに簡単です。

    <script type="text/javascript">
    function changeSelectText()
    {
    /* add your code here to determine the value for the time (use variable time) */

    /* add your code here to determine the value for the hour (use variable hours) */
   var textvalue = time + " (" + hours + ")"
   document.getElementById("main").options[1].text
   }
   </script>

For関数を使用する場合、selectの各値を変更して1を2、3などに置き換え、一定の間隔関数を設定して、常に更新することができます。

1
dp4

編集のための1つのオプションは、コンテンツを更新するためにいくつかの派手なパターンマッチングを使用することです。それはより遅く、より多くのリソースを消費し、フォーマットがどれほど規則的であるかに依存しますが、HTMLの修正を必要としません。しかし、私の懸念は、アクセシビリティとユーザーエクスペリエンスにあります。スクリーンリーダーソフトウェアが値を変更することは困難であり、他のユーザーを混乱させる可能性もあります。

0
cdeszaq