HTML在下拉框中选择标记和更改值

Question

我有一个选择框，我希望下拉文本显示一个东西，当它在框中被选中时，它显示另一个。我也不是指价值标签。我感谢所有的帮助。谢谢。 ^^

例如：

未按下时选择框应该说并选择了值：

T2

下拉框时显示的文字：

T1 :(包括T1a，T1b和T1c）：肿瘤距离不超过2厘米（3/4英寸）。

T2：肿瘤超过2厘米但不超过5厘米（2英寸）。

T3：肿瘤超过5厘米。

Answer 1

<强>最后：

的 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);
}

Answer 2

正如已经指出的，这不是一个简单的HTML taslk。它需要一些编码才能从选择中获取属性“value”。

<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> 

如果您下拉列表，您将看到长格式（标签之间的文本内容）...如果您选择一个，小脚本将返回选项属性中的值。当然，有其他方法来获取DOM对象，但我给它一个id并使用了getElementById，这使我更容易看清代码。

在此处测试http://jsfiddle.net/radiotrib/gGMLV/2/