我完成了此脚本，通过从分配给每个字母的下拉菜单中选择字母来构造单词。但是，当从下拉列表中更改一个已选择的字母时，这些字母的显示顺序也会更改。
例如：如果您从下拉菜单中选择字母并构造单词“ 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>
尝试我的例子。它使用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时有效。
如果这没有帮助，请告诉我。
请考虑以下示例。
$(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").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个下拉菜单，则可以考虑使用数组存储每个字母，仅在显示时将它们连接起来。考虑到字符串只是一个字符数组，因此有多种方法可以更改单词中的单个字母。