How I can add data attribute into Hyperlink?


How to add multiple options from the selection box to the data attribute data-clc in the hyperlink?

For a better understanding, please visit this JSfiddle page. working in textarea but TestLink hyperlink not working.

JSfiddle: jsfiddle [.] net [/] emresaracoglu/2u9atmh1/2/

I couldn’t add a direct link. This is not possible due to site rules. I’m sorry for that.


For example:
<a href="#" id="comeMan" data-clc=" Collection2,Collection3,Collection4">TestLink</a>

How familiar are you with jQuery? As you’re using that in your fiddle, it will do a lot of the heavy lifting for you – $("#selection").val() will return the values of all the selected options as an Array.

Given that, you would simply take the array returned from that, and .join(",") it to make a string of all the values you’re looking for.

To see your fiddle retooled and working,

//jQuery functionality should be defined in a $.ready(), or with the shorthand below 
$(function() {
   * This function will do our "heavy lifting". It creates an array of
   *   the values currently selected, then creates a SECOND array of
   *   the text of those selected options, then turns them each to
   *   strings and applies them to the appropriate DOM nodes.
   * - testLinkEl gets a data-attribute of the values;
   * - displayEl gets the value of the titles.
  function updateSelectionDisplays() {
    // With a multi-select, val() returns an array of selected values
    let mySelections = selectEl.val(),
      // We use .map() to convert those values to the selected option titles
      mySelectionsText = => {
        return $("option[value='" + selectionValue + "']").text();

    // Update the data attribute to contain the selected options values
    testLinkEl.attr("data-clc", mySelections.join(","))
    // and teh textarea to contain the option titles.
    displayEl.val(mySelectionsText.join(", "))

  // Save references to each of the els we'll be referencing.
  let testLinkEl = $("#comeMan"),
    selectEl = $("#selection"),
    displayEl = $("#selected");

  // This is the function that will update our link and textArea
  // We call it here, as we have initially selected values.

  // Now, each time we change the selection, we call that same
  //  update function.


Your code looks really good. You helped me in my project, thank you for your time.