We Keep Coding

How to get a value from an active li > a using Jquery from Mapbox API?

I am trying to get the value from a forward geocoder that predicts addresses when someone is typing, and send that value to a form with the id "pickup". I can't seem to capture the li > a from the mapbox api that becomes active when someone starts typing in the input.
Here is a screenshot of the Mapbox address search:
Snippet of code I'm trying. I've also tried many variations of this:
$("ul.suggestions").find("li.active").click(function() {
pickupLoc = $(this).attr("value");
$("#pickup")[0].value= pickupLoc;
});
Thanks!

There is no value attribute of li element. Try text() instead.
Change
pickupLoc = $(this).attr("value");
To
pickupLoc = $(this).text();
Demo:
$("ul.suggestions").find("li.active").click(function(){
var pickupLoc = $(this).text();
console.log(pickupLoc);
});
.active{
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="suggestions">
<li class="active">
<a>
<strong>ABC</strong>
Sample Text 1
</a>
</li>
<li>
<a>
<strong>SDF</strong>
Sample Text 2
</a>
</li>
</ul>

I avoided trying to access the active li all together and just pulled the final address text after the user selected them using the document query selector and .value. The mapbox-directions-origin-input ID is added here because there is a origin and destination input field. This one selects the origin input:
function myFunction() {
let origin = document.getElementById("mapbox-directions-origin-
input").querySelector(".mapboxgl-ctrl-geocoder
input").value;
document.getElementById("pickup").value = origin;
};

Get selected value of jQuery dropdown plugin

I'm using jQuery dropdown plugin and I want to get selected value, but there is no such option in docs, How can I get selected value via jQuery?
(function($) {
$(function() {
$('ul').dropdown({
closeReset: false,
nested: true,
collision: true,
selectParents: true
});
});
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dropdown/2.0.3/jquery.dropdown.js"></script>
<link rel="stylesheet" href="http://dane.one/wordpress/wp-content/uploads/dropdown.min_.css?ver=7e2962cd876e2a95be90b37baa97b096" type="text/css" />
<ul>
<li>group 1
<ul>
<li>assest 1
<ul>
<li>bingo!</li>
</ul>
</li>
</ul>
</li>
<li>group 2
<ul>
<li>assest 2
<ul>
<li>bingo!</li>
</ul>
</li>
</ul>
</li>
</ul>
Also this problem asked before in github but no answer.
Look like the plugin not working on this snippet, please see demos here (I'm using Nested demo)
Note that, I'm using ul not select option

#CodeSavy answer is in the right direction and logic but got some issue. if the creator did not provide an option to get selected value you should do this on your own, open jquery.dropdown.js search for var classes = { you'll find this selected: 'dropdown-selected', so after select each item it will add this class to selected item. in the previous answer you get all items text() after click but below you can get only selected item text()
$(document).on('click', '.dropdown-item', function() {
if ($(this).hasClass('dropdown-selected')) {
var val = $(this).text();
console.log(val);
}
})
But with some change on plugin script you can add some attribute or value to get better result.

Care to use select? documentation used select not ul. That way, you can get selected value. Can't comment so will post here
Updated answer: here's how to get the selected
var selectedValue = '';
$(document).on('click', '.dropdown-menu li.dropdown-item', function(e) {
selectedValue = $(this).find('span').text();
});

Change text of a link to this element's text

I am trying to update the text of a link with the text from the item clicked. I thought that $(this).text(); would capture the element's text as a jQuery object, but nothing is happening. I tried writing a fiddle but it gives me a post error.
Fiddle
$(".country-label").on("click", function() {
var updateCountry = $(this).text();
console.log(updateCountry);
$('#country-label').text(updateCountry);
localStorage.setItem('CountryName', updateCountry);
});
Canada
<ul class="dropdown">
<li><label>Select your Country</label></li>
<li>United States</li>
<li>Australia</li>
<li>France</li>
<li>Germany</li>
</ul>

The issue(in your Fiddle) is that you're passing a string, updateCountry, instead of the variable. The jQuery should look like this:
$(".country-label").on("click", function(event) {
event.preventDefault();
var updateCountry = $(this).text();
$('#country-label').text(updateCountry);
console.log(updateCountry);
});
You also did not include jQuery in your Fiddle, I have updated it here:
Updated Fiddle

Try this..
$(".country-label").click(function(event) {
event.preventDefault();
var updateCountry = $(this).text();
$('#country-label').text(updateCountry);
console.log(updateCountry);
});
And I change jsfiddle setting as:
FIDDLE

Output input selection as text to element

I'm a UI Designer working on a multi-page Q&A form, I'm a beginner with jQuery mostly mashing snippets together.
Here's the code: http://codepen.io/covanant/pen/GJZYLq
This part of the form is basically multiple accordions wrapped into tabs, I have most of it working as required but one of the things I need to do, is that whenever I a choice or option, I want to be able to output that option to an element as text right underneath the question.
The element is:
<span class="selected-answer"></span>
You can see it displayed in the first question in the demo, the way that I'd like it to work is that whenever I click the Close All button, it will fadeIn the .selected-answer element and when I click Open All, it will fadeOut the .selected-answer element.
The buttons:
Open All
Close All
jQuery:
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});

First, it doesn't make sense to give each of your select options the same value attribute. By convention, these should be distinct. If you aren't using the value attribute, you can remove it altogether. Otherwise, you should change it to something like:
<select>
<option value="None Selected">None Selected</option>
<option value="Photocell On">Photocell On</option>
<option value="Off Control Only">Off Control Only</option>
<option value="Photocell On / Off Control Only">Photocell On / Off Control Only</option>
</select>
Once that is sorted out, you need to go up the DOM hierarchy and find the right span element to change.
$('select').on('change', function() {
var span = $(this).closest('div.panel').find('span.selected-answer');
span.text($(this).val());
});
For the checkbox questions, you I would do something like this:
HTML:
<span class="selected-answer">
<ul class="checked-options">
<li data-check="checkbox1">nWifi (nLight)</li>
<li data-check="checkbox2">nLightFixtures</li>
<li data-check="checkbox3">xCella (LC&D)</li>
<li data-check="checkbox4">Daylight Harvesting</li>
<li data-check="checkbox5">xPoint (LC&D)</li>
<li data-check="checkbox6">nWifi (nLight)</li>
</ul>
</span>
CSS:
.checked-options li {
display: none;
}
jQuery:
$('input[type="checkbox"]').on('change', function() {
var checkbox = $(this);
var id = checkbox.attr('id');
if ($(this).prop('checked'))
$('li[data-check="' + id + '"]').show();
else
$('li[data-check="' + id + '"]').hide();
});
As for the fading, this should do the trick:
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
$('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
$('.selected-answer').fadeOut();// <-- Fade out
});
Also, depending on whether you want all the questions open or closed by default when the form first loads, you may need to hide all the .selected-answer elements on page load.
Here's the updated codepen.

I agree with VCode on using distinct values for each option in the select elements. But instead of using the value you provide for each option, I think you should use the actual label, that way you can have a more description label, than the option value.
I modified a few of your existing functions to actually populate the selected answer. First I noticed that you already have a function for handling changes to your select - in there I added a small snippet to get the selected answer and pass it to nextQuestion.
$(".panel-body select").change(function() {
var selectElem = $(this);
var answer = selectElem.find("option:selected").text();
nextQuestion(selectElem, answer);
});
Then you also have input elements. Here is your modified input change function:
$(".panel-body input").change(function() {
var inputElem = $(this);
var inputType = inputElem.attr('type');
// common parent for input
var commonParent = inputElem.closest(".panel-body");
var answers = commonParent
.find("input:checked")
.closest("."+inputType)
.find("label")
.map(function(){return this.innerText;})
.get()
.join(", ");
nextQuestion(inputElem, answers);
});
And now as you may have noticed, I added a parameter to the nextQuestion function. I put this code in nextQuestion because you were already accessing the parent there so I wanted to re-use that logic to populate the selected answer.
function nextQuestion(currentQuestion,selectedAnswer) {
var parentEle = currentQuestion.parents(".panel");
if (arguments.length>1) {
parentEle.find('.selected-answer').text(selectedAnswer);
}
if (parentEle.next()) {
parentEle.find(".fa-question").addClass("fa-check check-mark").removeClass("question-mark fa-question").text("");
}
}
Just like VCode mentioned, you can do the fading of the answers using fadeIn/fadeOut
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
$('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
$('.selected-answer').fadeOut();// <-- Fade out
});
// hide all .selected-answers
$('.selected-answer').hide();
Here is a link to your codepen with my modifications: http://codepen.io/anon/pen/ZGpXXK

which <li> element was clicked?

I have 5 (maybe more) li elements.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
I want to get which elements was clicked(which row??). If random user clicks Two I want to get $("li:eq(1)")(as typed).
How can I get this result?

You can use jQuery.index. Something like this:
$('ul > li').click(function() {
alert($(this).index($(this).parent('li'));
});

You can get the text node value of the clicked item with:
$('li').click(function(){
var clicked = $(this).text();
alert(clicked+" was clicked");
});

$("#ulId li").click(function() {
$(this).something(); //the clicked li is $(this), and you can invoke functions on it.
})

If you give your elements an id such as
<ul id="mylist">
<li id="el_1">One</li>
<li id="el_2">Two</li>
<li id="el_3">Three</li>
<li id="el_4">Four</li>
<li id="el_5">Five</li>
</ul>
Then you can use $(this).attr(id) in the click handler to determine the id of the clicked element. This will also allow to give non sequential ids to your elements, and will detach what's written in the <li> from the actual value you get.
Also, you can encode multiple value in the id (for instance el_5_3) which can be useful sometimes.
$("#mylist li").click(function()
{
var id = $(this).attr("id").split("_");
alert("You clicked the element with id="+id[1]);
});
Working example:
http://jsfiddle.net/jFrdp/

Working example: http://jsfiddle.net/tbugV/1/
$("#mylist li").each(function(index)
{
$(this).data("row", index);
}).
click(function()
{
alert($(this).data("row"));
});

$('html').click(function() {
var el = e.target;
alert(el);
});

As people just keep posting code, and no explanations, I will try the other way around...
The click event handler is called in the scope of the clicked element, so you can use the this keyword to access the element. You can use $(this) to get a jQuery object that contains the clicked element, so that you can use jQuery methods on it.
Example:
$(document).ready(function(){
$('ul li').click(function({
var text = $(this).text();
alert('You clicked on the item with the text "' + text + '"');
}));
});

$('li').click(function(){
alert($(this).html());
});
This code will alert one when user will click the one button.