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

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

例如：

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

T2

下拉框时显示的文本：

T1：（包括T1a、T1b和T1c）：肿瘤直径小于等于2厘米（3/4英寸）

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

---

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

正如已经指出的，这不是一个简单的HTML taslk。它需要一些编码来从select中获取属性“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> 

函数flipIt（）{
var sel=document.getElementById（'cars'）；
var value=sel.options[sel.selectedIndex].value；
对于（变量x=0；x

如果您下拉列表，您将看到长表单（标记之间的文本内容）…如果您选择其中一个，小脚本将在option属性中返回值。当然，还有其他方法可以获取DOM对象，但我给了它一个id，并使用getElementById t使我更容易、更清晰地查看代码

---

在这里测试它

最后：

$.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();
});

选项标签不完全受支持（即使认为是：）

若要欺骗并使其工作，请添加第一个空白

使用jQuery，我们将

• 获取所选的选项值
• 将该值设置为空白<代码> <代码>标签

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>

肿瘤直径小于等于2厘米（3/4英寸）。
b——肿瘤直径小于等于2厘米（3/4英寸）。
c——肿瘤直径小于等于2厘米（3/4英寸）。
肿瘤直径超过2厘米，但不超过5厘米（2英寸）。
肿瘤直径超过5厘米。

---

使用纯JS就像：

函数selectLabelize（）{
var v=该值；
此.options[0].innerHTML=v；
此.options[0]。值=v；
此.options[0]。selected=true；
}
var sel=document.getElementsByTagName（'select'）；
var ev=document.createEvent（'Event'）；
ev.initEvent（“变更”，真，假）；
对于（VarI=0；我从页面上直接删除了..但是他们错过了我必须编辑的部分以使答案有效：）有效吗？“工作”是什么意思？什么浏览器？顺便说一句，你有一个打字错误：
'V“
根据问题的上下文进行工作。。我用来保存ne类型的示例没有设置值属性，我懒得再看下去了：）输入错误。。我是谁。。呵呵。。是的，我60多岁了，手指很胖。。。这种情况时有发生，我可以在这个愚蠢的苹果键盘上打字。你不仅应该在IE中测试你的代码，还应该在所有其他现代（更好的）浏览器中测试你的代码。。现在我必须写一些代码来再次给出正确的答案。。该死的，我应该继续看色情片！！我试图避免使用框架，因为我不希望OP使用框架。。。因此，解决这个问题还有很长的路要走。。。顺便说一句-标签也可以是一个自定义属性：）你有没有发布过它的一把小提琴？？如果用户在提交之前返回并重新选择，我看不出它会在哪里重置文本：）@KevinWeber你很受欢迎真的：）这是一个非常有趣的任务@KevinWeber给我一些时间，我会添加一个纯JS版本。没关系，我在我的项目中使用jquery。你就是炸弹！我倾向于为各种项目雇佣自由职业者。你有我可以联系你的电子邮件地址吗？