I have a shortcode from functions, which retrieves a list of all users from active role. I have managed to get the list into the dropdown list with a little trickery if I wrap a div around the users and name it userdiv.
The problem is that no matter how I try to get the users into the list, they either show up as one choice (all users) or all the letters show up as a separate choice.
I have this in functions:
function userLooping($role)
{
$user_query = new WP_User_Query( array( 'role' => $role ) );
// User Loop
if ( !empty( $user_query->results ) ):
echo '<div id="userdiv">';
foreach ( $user_query->results as $user ):
echo '"';
echo $user->display_name; // display user name
echo '",';
endforeach;
echo '</div>';
endif;
}
add_shortcode( 'users_role', 'userLooping' );
I have put in [users_role]
to fetch the users to the page (may not need this).
The dropdown has ID input_5_13
Script to get the users to the dropdown:
<script>
var select = document.getElementById("input_5_13"),
arr = [document.getElementById("userdiv").innerHTML];
for(var i = 0; i < arr.length; i++)
{
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("value",arr[i]);
select.insertBefore(option,select.lastChild);
}
</script>
When the script collects the text from userdiv
, it ends up as an option. A long line. If I remove [ ]
from the script, all letters are fetched as an alternative.
Tried adding "
before each user and ","
after, but I can't get it to work.
If I enter it manually in the script, it works. Then each user is added as a choice.
var select = document.getElementById("input_5_13"),
arr = ["user1","user2","user3"];
What am I doing wrong?
echo '",';
from shortcode and inserted insteadecho '<option value="zo">';
echo $user->display_name; // display user name
echo '</option>';
The problem, however, is that everyone gets value zo.<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(document).ready(function () { where data = []; for (var index = 0; index <= data.length; index++) { $('#input_5_13').append('<option value="' + document.getElementById('divuser').innerHTML + '">' + + '</option>'); } }); </script>
Now all the choices come up as they should in the list.