2016-08-24 11 views
2

CSS <select>タグがどのようにマテリアライズされているか理解できません。マテリアライズCSS - 選択にDOMの名前も適切な値がありません

通常のHTML選択タグでは、name=""属性を挿入し、各オプションにはvalue=""属性を挿入します。これはマテリアライズCSSでは見付かりません。

このコード:

<div class="input-field col s12"> 
    <select> 
    <option value="" disabled selected>Choose your option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
    <label>Materialize Select</label> 
</div> 

はDOMでこのにレンダリング:私が午前

<div class="input-field col s12 m6"> 
    <div class="select-wrapper"><span class="caret">▼</span> 
    <input class="select-dropdown" readonly="true" data-activates="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" value="Choose your option" type="text"> 
    <ul style="width: 296px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" class="dropdown-content select-dropdown"> 
     <li class="disabled"><span>Choose your option</span></li><li class="active selected"><span>Option 1</span></li><li class=""><span>Option 2</span></li> 
     <li class=""><span>Option 3</span></li> 
    </ul> 
    <select class="initialized"> 
      <option value="" disabled="" selected="">Choose your option</option> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
    </select> 
    </div> 
    <label>Materialize Select</label> 
</div> 

問題:

  1. とどのように私はそのselect要素の名前を設定するのですが(それに応じてレンダリングされたinput要素で表される)?
  2. 値はリストに表示されているテキストです。私は、例えば、表示文字列とは異なる値を持つことを望む:すべて事前に

<option value="1">regular style</option> <option value="2">bold style</option> <option value="3">italic style</option>

感謝:)

+0

一般的に言えば、これらの '')として適用され、JavaScriptは '