How I can add data attribute into Hyperlink?

JavaScript
1

Hi,

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.

Goal

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

2

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, http://jsfiddle.net/snowMonkey/950benxj/4/.

//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() {
    displayEl.val("");
    // 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 = mySelections.map(selectionValue => {
        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.
  updateSelectionDisplays();

  // Now, each time we change the selection, we call that same
  //  update function.
  selectEl.change(updateSelectionDisplays);

})
3

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