javascript - HTML 选择标签并在下拉框中更改值

Question

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

例如:

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

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