1

選択ボックスがあります。ドロップダウンテキストに1つのものを表示し、ボックスで選択すると別のものを表示します。バリュータグも意味しません。私はすべての助けに感謝します。ありがとうございました。^^

例えば：

ドロップダウンされていない場合の選択ボックスに次のように表示され、値が選択されます。

T2

ボックスがドロップダウンされたときに表示されるテキスト：

T1 :( T1a、T1b、およびT1cを含む）：腫瘍の直径は2 cm（3/4インチ）以下です。

T2：腫瘍の幅は2cmを超え5cm（2インチ）以下です。

T3：腫瘍の直径は5cmを超えています。

4

2 に答える 2

2

ついに：

LIVE DEMO

オプションラベルは完全にはサポートされていません（W3Schoolsがサポートしていると考えている場合でも:)）

騙して機能させるには、最初の空白を追加します<option>
jQueryを使用して

  • 選択したオプション値を取得し、
  • その値をテキストおよび空白<option>タグの値として設定します

jQuery：

$.fn.selectLabelize = function(){
  var v = $(':selected', this).val();
  $('option', this).eq(0).text(v).val(v).prop('selected', true);
};

$('select').each(function(){
  $(this).selectLabelize();
});

$('select').on('change', function(){
    $(this).selectLabelize();
});

次のようなHTMLを考慮に入れます。

<select>
  <option></option>
  <optgroup label="T1">   
      <option value="T1a" selected>a --  Tumor is 2 cm (3/4 of an inch) or less across.</option>
      <option value="T1b">b --  Tumor is 2 cm (3/4 of an inch) or less across.</option>
      <option value="T1c">c --  Tumor is 2 cm (3/4 of an inch) or less across.</option>
  </optgroup> 
  <optgroup label="T2">
      <option value="T2"> Tumor is more than 2 cm but not more than 5 cm (2 inches) across.</option>
  </optgroup> 
  <optgroup label="T3">
      <option value="T3"> Tumor is more than 5 cm across.</option>
  </optgroup>
</select>

純粋なJSを使用すると、次のようになります。

PURE JS - LIVE DEMO

function selectLabelize(){
   var v = this.value;
   this.options[0].innerHTML = v ;
   this.options[0].value = v ;
   this.options[0].selected = true;
}

var sel = document.getElementsByTagName('select');
var ev = document.createEvent('Event');
ev.initEvent('change', true, false);

for(var i=0; i<sel.length; i++){
      sel[i].addEventListener('change', selectLabelize ); 
      sel[i].dispatchEvent(ev);
}
于 2013-03-26T19:55:44.210 に答える
1

指摘されているように、これは単純なHTMLタスクではありません。選択から属性「値」を取得するには、少しコーディングが必要です。

<script>
    function flipIt(){
    var sel = document.getElementById('cars');
    var value = sel.options[sel.selectedIndex].value;
    for(var x=0; x < sel.options.length; x++) {
      item = sel.options[x];
      var label = item.getAttribute('label'); 
      item.innerHTML = label;
    }
    sel.options[sel.selectedIndex].innerHTML = value;
    alert(value);
  }
</script>

<select id='cars' onChange='flipIt()'>
  <option label="Volvo (Latin for 'I roll')" value="V">Volvo (Latin for "I roll")</option>
  <option label="Saab (Swedish Aeroplane AB)" value="S" selected>Saab (Swedish Aeroplane AB)</option>
  <option label="Mercedes (Mercedes-Benz)" value="M">Mercedes (Mercedes-Benz)</option>
  <option label="Audi (Auto Union Deutschland Ingolstadt)" value="A">Audi (Auto Union Deutschland Ingolstadt</option>
</select>

リストをプルダウンすると、長い形式（タグ間のテキストコンテンツ）が表示されます... 1つを選択すると、小さなスクリプトがオプション属性の値を返します。もちろん、DOMオブジェクトを取得する方法は他にもありますが、IDを指定し、getElementByIdを使用すると、コードがわかりやすくなります。

ここでテストしてくださいhttp://jsfiddle.net/radiotrib/gGMLV/2/

于 2013-03-26T19:00:36.937 に答える