在下拉列表中更改部分文本

Question

我的下拉列表如下：

<select class="dropit">
<option value="1">1</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
<option value="2.25">2</option>
<option value="2.5">2</option>

等

我有：

jQuery("select option:contains('.25')").text("¼"); 

我正在努力实现的目标：

<select class="dropit">
<option value="1">1</option>
<option value="1.25">1 1/4</option>
<option value="1.5">1 1/2</option>
<option value="1.75">1 3/4</option>
<option value="2">2</option>
<option value="2 1/4">2</option>
<option value="2 1/2">2</option>

但我想使用HTML分数： ¼为1/4 ½代表1/2 ¾为3/4

所以我的最后一次下拉会是：

1¼（以HTML分数表示） 1½

等

任何帮助将不胜感激！

谢谢！

Answer 1

½是一个HTML实体，因此需要将其解释为html才能正确呈现。这是我的方法，它应该适用于所有当前/未来的值，假设它们遵循...1, 1.25, 1.5, 1.75, 2...模式。

$("select option").each(function(){
  $this = $(this);
  switch($this.val() % 1){
  	case .25:
      $this.html(Math.floor($this.val()) + " ¼");
    	break;
    case .5:
      $this.html(Math.floor($this.val()) + " ½");
    	break;
    case .75:
      $this.html(Math.floor($this.val()) + " ¾");
    	break;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropit">
<option value="1">1</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
<option value="2.25">2</option>
<option value="2.5">2</option>
</select>

Answer 2

尝试以下代码

var text=$("select option:contains('.25')").text()
text=text.substr(0,text.indexOf('.'));
$("select option:contains('.25')").html(text+"¼")

HTML分数是html标签而不是文本，因此要呈现html标签，您必须使用html（）而不是text（）。