Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to create formating tag based on user select from multiselect dropdown in javascript

I have formating (bold,italic,underline) list in multiselect dropdown. Based on user selection i need to create formating tag.

example: if user select bold and italic from dropdown i need to create tag like <b><i></i></b> and if user select only italic i need to create tag like <i></i>

I have tried below:

<select id="multiple-select" multiple>
    <option value="Bold">Bold</option>
    <option value="Italics">Italics</option>
    <option value="Underline">Underline</option>    
</select>
<button id="Apply">Apply</button>

javascript code:
   $("#Apply").click(function(){
      var selectedtag = $("#multiple-select option:selected").val();
      var selectedtag = $("#multiple-select option:selected").val();
      for(var fr=0;fr<selectedtag.length;fr++)
      { 
        var createtag = '<'+selectedtag[fr]+'></'+selectedtag[fr]+'>';
        var createnode = document.createElement(createtag); 
      }
   });

Expecting
based on input need to create tags

Tags:

2

Answers


  1. 0

    You will need to iterate over all selected options and construct the tags accordingly.

    document.getElementById("Apply").onclick = function() {
  var selectedOptions = document.getElementById("multiple-select").selectedOptions;
  var tags = { 'Bold': 'b', 'Italics': 'i', 'Underline': 'u' };
  var openTags = '';
  var closeTags = '';

  for (var i = 0; i < selectedOptions.length; i++) {
    var tag = tags[selectedOptions[i].value];
    openTags += '<' + tag + '>';
    closeTags = '</' + tag + '>' + closeTags;
  }

  var finalTag = openTags + closeTags;
  console.log(finalTag);
};
    <select id="multiple-select" multiple>
    <option value="Bold">Bold</option>
    <option value="Italics">Italics</option>
    <option value="Underline">Underline</option>    
</select>
<button id="Apply">Apply</button>
    • I have replaced jQuery with vanilla JavaScript.
    • I have created an object tag to map the text options to their corresponding HTML tags.
    • The openTags and closeTags strings are used to build the opening and closing tags in the correct order.
    • The for loop iterates over the selected options and constructs the tags.
    • finalTag contains the concatenated result of the selected formatting tags.
    Login or Signup to reply.
  2. 0

    Directly assign tags as the values of corresponding options.

    Use 2 variables to contact opening and closing of tags

    Finally, combine them to get the final tag html.

    Working snippet:

    $("#Apply").click(function() {
  let selectedtag = $("#multiple-select").val();
  let openTags = '';
  let closeTags = '';
  for (fr = 0; fr < selectedtag.length; fr++) {
    openTags = openTags+'<' + selectedtag[fr] + '>';
    closeTags = '</' + selectedtag[fr] + '>' + closeTags;
  }
  console.log(openTags + closeTags);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select id="multiple-select" multiple>
  <option value="b">Bold</option>
  <option value="i">Italics</option>
  <option value="u">Underline</option>
</select>
<button id="Apply">Apply</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search