I have multiple dropdowns and I'd like to combine the selected options of both dropdown text and append that to a <p>
.
I was recently able to code URL parameters to auto select certain dropdown options. This would be the reverse of that I guess. How to generate URL parameters from the dropdown options.
When the user makes their selection they can click the button (getshareinfo) which will auto generate the parameters and append it to the <p>
below.
So far this is what I'm stuck on, I've tried adding text directly into the selector via '' and but that doesn't seem work.
Example of what it should do:
Box 1: driving
Box 2: fast
generated URL text: www.domain.com?user=driving&speed=fast
$('#getshareinfo').on('click', function() {
$("#env-select option:selected").clone().appendTo("#shareinfo");
$('#src option:selected').clone().appendTo("#shareinfo");
})
<select id="env-select">
<option value="driving">driving</option>
<option value="biking">biking</option>
<option value="walking">walking</option>
</select>
<select id="src">
<option value="slow">slow</option>
<option value="average">average</option>
<option value="fast">fast</option>
</select>
<button type="button" id="getshareinfo">Share</button>
<br>
<p id="shareinfo"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Edited
CodePudding user response:
Where is the value? Just do
$("#shareinfo").text( $("#env-select").val() $("#src").val())
to concatenate or if you need a URL
const url = new URL("https://www.example.com")
url.searchParams.set("user",$("#user").val())
url.searchParams.set("speed",$("#speed").val())
$("#shareinfo").html(`<a href="${url.toString()}">Click</a>`)