从选项中选择时更改选项值
问题描述:
我有一个具有超过当前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 /月。
答
该解决方案带有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>
+0
假设这些选项没有“月”呢? –
答
集宽度:
<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宽度文本。
[HTML选择 - 在HTML中显示值属性但保留选项文本]的可能副本(https://*.com/questions/26822596/html-select-display-value-attribute-in-html-but-retain -option-text) –