从选项中选择时更改选项值

Question

我有一个具有超过当前div的宽度的值的下拉列表。当选择该选项时，我只想显示文本的一部分。我试图扩大宽度，但表单结构越来越混乱。

<div class="calci-input"> 
      <select id="g-suite-pac-id" name="g-suite-package">  
        <option value="2.40">$2.40/month</option> 
        <option value="4.00">$4.00/month</option> 
        <option value="2.00">$2.00/month(12 months)</option> 
        <option value="3.33">$3.33/month (12 months)</option> 
      </select> 
</div> 

我怎样才能实现这个使用jQuery？

预期的输出是当选项$ 2.00/month（12个月）被选中时，它在下拉菜单中显示为$ 2.00 /月。

Answer 1

该解决方案带有onchange和onmousedown事件。使用jQuery的选择器，我们可以获得选定的选项并更改其显示HTML。选择组分与任何固定宽度象下面

//you really don't need jQuery, but we can wrap it in there. 
 

 
//wrap in ready function to make sure page is loaded 
 
$(document).ready(function() { 
 
    $("select#g-suite-pac-id").on("change", function() { 
 
    var text = $(this).children("option").filter(":selected").text() 
 
    var edited = text.match(/^.+?\/month/); //use regex |^start, .+? lazy search for everything until /month 
 
    
 
    //save 
 
    $(this).children("option").filter(":selected").data("save", text); 
 
    
 
    //change 
 
    $(this).children("option").filter(":selected").text(edited); 
 
    
 
    }); 
 

 

 
    $("select#g-suite-pac-id").on("mousedown", function(e) { 
 
     //restore a saved value 
 
     var selected = $(this).children("option").filter(":selected"); 
 
     if (selected.length > 0) 
 
     { 
 
     if (selected.data("save")) 
 
     { 
 
      selected.text(selected.data("save")); 
 
      selected.removeData("save"); 
 
     } 
 
     } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="calci-input"> 
 
    <select id="g-suite-pac-id" name="g-suite-package">  
 
        <option value="2.40">$2.40/month</option> 
 
        <option value="4.00">$4.00/month</option> 
 
        <option value="2.00">$2.00/month(12 months)</option> 
 
        <option value="3.33">$3.33/month (12 months)</option> 
 
      </select> 
 
</div>

Answer 2

集宽度：

<div class="calci-input"> 
      <select id="g-suite-pac-id" name="g-suite-package" style="width:96px">  
        <option value="2.40">$2.40/month</option> 
        <option value="4.00">$4.00/month</option> 
        <option value="2.00">$2.00/month(12 months)dffsdfsdfdsfsdfdsfdsfsd</option> 
        <option value="3.33">$3.33/month (12 months)</option> 
      </select> 
</div> 

试上面的代码，它示出了可适应96PX宽度文本。