问题: 嗨,检查我的小提琴。我想单独使用所选值[闭合视图值]。我的意思是当我打开我的下拉列表时,所有选项都应该是小写的。但选择的选项是大写的。
代码
<select>
<option>One</option>
<option>Two</option>
</select>
$("select").change(function () {
$(this).find("option").text(function (i, text) {
return $(this).is(":selected") ? text.toUpperCase() : text.toLowerCase();
});
})
有可能吗?如果是这样,任何建议。如果没有,请告诉我原因。 请参阅附件。这就是我所说的封闭视图
答案 0 :(得分:2)
非常奇怪的解决方法(当下拉列表关闭时,选择的选项是大写;当打开下拉列表时,所有选项都是小写),但应该有效:
var wasSelected = false;
$("select").click(function()
{
if (!wasSelected) //on dropdown open
{
$(this).find("option:selected").text(function(i, text)
{
return text.toLowerCase();
});
}
else
{
wasSelected = false;
}
});
$("select").change(function()
{
$(this).find("option").text(function(i, text)
{
return $(this).is(":selected") ? text.toUpperCase() : text.toLowerCase();
});
wasSelected = true;
});
$("select").change(); //initial dropdown formatting
$("select").click(); //initial dropdown formatting
<强>更新即可。更多的解决方法,但应该解决上述问题:
var wasSelected = false;
var wasClicked = false;
$("select").click(function()
{
if (wasClicked)
{
onClose($(this));
}
else if (!wasSelected)
{
$(this).find("option:selected").text(function(i, text)
{
return text.toLowerCase();
});
wasClicked = true;
}
else
{
wasSelected = false;
}
});
$("select").change(function()
{
wasSelected = wasClicked;
onClose($(this));
});
$("select").blur(function()
{
onClose($(this));
});
function onClose(jElement)
{
jElement.find("option").text(function(i, text)
{
return $(this).is(":selected") ? text.toUpperCase() : text.toLowerCase();
});
wasClicked = false;
}
$("select").change();
答案 1 :(得分:1)
$('option').each(function(i){
if(!$(this).is(':selected'))
$(this).text($(this).text().toLowerCase());
});
检查你的小提琴。我已经添加了上面的代码。我这就是你想要的一切??
检查这个小提琴Dropdown case change
答案 2 :(得分:0)
据我所知,您的代码运行正常。如果您希望在页面加载时在UPPER情况下具有预先选择的值,那么您需要在jQuery dom上调用代码
您可以使用以下代码
$("select").change(function () {
modifySelectBox();
})
jQuery(document).ready(function(){
modifySelectBox()
})
function modifySelectBox() {
$("#myselbox").find("option").text(function (i, text) {
return $(this).is(":selected") ? text.toUpperCase() : text.toLowerCase();
});
}
<强> HTML 强>
<select id="myselbox">
<option selected="selected">One</option>
<option>Two</option>
<option>Three</option>
</select>