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

Question

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

例如：

未下拉时的选择框应显示并选择该值：

T2

当框被拖下时显示的文本：

T1：(包括T1a、T1b和T1c)：肿瘤直径2厘米(3/4英寸)或更小。

T2:肿瘤直径大于2厘米但不超过5厘米(2英寸)。

T3:肿瘤直径超过5厘米。

Answer 1

如前所述，这不是一个简单的HTML taslk。它需要进行一些编码才能将属性"value“从select中取出。

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