как построить слово из букв в выпадающем меню в jquery - PullRequest
Новая
       0

как построить слово из букв в выпадающем меню в jquery

0 голосов
/ 28 мая 2020

Я сделал этот сценарий, чтобы составить слово, выбирая буквы из раскрывающихся меню, выделенных для каждой буквы алфавита. Но при изменении уже выбранной буквы в раскрывающемся списке изменяется порядок отображения букв.

Например: если вы выберете буквы из раскрывающегося меню и создадите слово «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>

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Рассмотрим следующий пример. 

$(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 раскрывающийся список, вы можете рассмотреть возможность использования массива для хранения каждой буквы, присоединяя их только при отображении. Учтите, что строка - это просто массив символов, поэтому есть способы изменить одну букву в слове.

1 голос
/ 28 мая 2020

Попробуй мой пример. Он использует 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.

Если это не поможет, скажите, пожалуйста.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...