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

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 /月（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宽度的文本。