如何在 jQuery 的下拉菜单中用字母构造单词

我已经完成了这个脚本，通过从分配给每个字母的下拉菜单中选择字母来构造一个单词。但是，当从下拉列表中更改已选择的字母时，字母的显示顺序会更改。

例如：如果您从下拉菜单中选择字母并构造单词"HTML"，然后如果您再次从下拉菜单中将"H"的字母更改为"X"，它将显示"TMLX"(它应该显示 XTML(。如何使其以正确的顺序显示(例如："XTML"(

$('body').on('change','.engravingSelect',function(){
//alert('it works');
let text = '';
let displayText = '';
console.log(text);
console.log("text");
var selectedOption = $(this).children("option:selected").val(); 
$('#EngravingSelects .engravingSelect').each(function(){
if ($(this).val() == '') {
text += ' ';
displayText += '';
} else {
console.log('time');
//text color change
var current = $(this).attr('data-latter');           
var color = $(this).parent().parent().siblings('.colorDiv').find('.' + current).children("option:selected").val();   
$(".engravingColorSelect  ."+current).css("background-color:"+color);
text += $(this).val()+color;
displayText += "<span style='color:"+color+";'>"+$(this).val()+"</span>";
}
});

字母下拉菜单

<div class="option-wrap-family">
<select class="engravingSelect" id="comonOption">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
.....(A to Z)
</select>
</div>

请考虑以下示例。

$(function() {
function makeDropDown(tObj) {
for (var i = 65; i <= 90; i++) {
$("<option>").html(String.fromCharCode(i)).appendTo(tObj);
}
}
function getWord() {
var w = "";
$(".engravingSelect").each(function(i, el) {
w += $(el).val();
});
return w;
}
function getColor() {
// var color = $(this).parent().parent().siblings('.colorDiv').find('.' + current).children("option:selected").val();   
return "black";
}
function showWord() {
var w = getWord();
var c = getColor();
if ($(".displayText").length) {
$(".displayText").attr("class", "displayText " + c).html(w);
} else {
$("<div>", {
class: "displayText " + c
}).appendTo("body").html(w);
}
}
$(".engravingSelect").each(function(i, el) {
makeDropDown($(el));
$(el).change(showWord);
});
});

.displayText {
padding: 2em;
font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="option-wrap-family">
<select class="engravingSelect" id="comonOption-1">
<option></option>
</select>
<select class="engravingSelect" id="comonOption-2">
<option></option>
</select>
<select class="engravingSelect" id="comonOption-3">
<option></option>
</select>
<select class="engravingSelect" id="comonOption-4">
<option></option>
</select>
</div>

如果没有一个清晰完整的例子，我不得不做一些猜测。这使用 4 个下拉列表，因此很容易进行更改。如果您只有 1 个下拉列表，那么您可以考虑使用 Array 来存储每个字母，仅在显示时连接它们。考虑到字符串只是一个字符数组，因此有一些方法可以更改单词中的单个字母。

试试我的例子。它使用Bootstrap和jQuery。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My name in dropdown letters</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
</head>
<body>
<div class="dropdown">
<span class="dropdown-toggle" data-toggle="dropdown">Dropdown</span>
<div class="dropdown-menu">
<span class="dropdown-item">A</span>
<span class="dropdown-item">S</span>
<span class="dropdown-item">H</span>
<span class="dropdown-item">L</span>
<span class="dropdown-item">E</span>
<span class="dropdown-item">Y</span>
</div>
</div>
</body>
</html>

注意：为获得最佳效果，请展开此代码段。

这意味着它仅在您使用 HTML 时才有效。

如果这没有帮助，请告诉我。

相关内容

最新更新

热门标签：