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()

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textToDisplay" />
<input type="button" value="Add message" onClick="showMessage()" />
<input aria-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);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textToDisplay" />
<input type="button" id="click" value="Add message">
<input aria-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!