Set Value To An Aria-controls Input

I want to set an input aria-control value. But I can't do it using the traditional jQuery way. My code is this one: How can I set the value?

Solution 1:

Change the selector like this.your selector target the id not the aria-controls so use with attr selector.Also Input not have text() property so change with val()

functionshowMessage() {
 var message = jQuery("#textToDisplay").val();
 $("input[aria-controls=example]").val(message);
  }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text"id="textToDisplay" /><inputtype="button"value="Add message"onClick="showMessage()" /><inputaria-controls="example"type="text">

For below Terry comment use addeventlistener instead of inline click function.That do the click function in dom like this

$('#click').click(function() {
  var message = jQuery("#textToDisplay").val();
  $("input[aria-controls=example]").val(message);
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text"id="textToDisplay" /><inputtype="button"id="click"value="Add message"><inputaria-controls="example"type="text">

Solution 2:

Use attr selector

Selects elements that have the specified attribute with a value exactly equal to a certain value.

$( "input[aria-controls='example']").val(message);

Solution 3:

You can use

$("#myId").attr("aria-controls", myValue);

Hope this helps!