1

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

例如：

未下拉时的选择框应该说并且选择了值：

T2

下拉框时显示的文本：

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

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

T3：肿瘤直径超过 5 cm。

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>

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

在这里测试它http://jsfiddle.net/radiotrib/gGMLV/2/

于 2013-03-26T19:00:36.937 回答