Search code examples
jqueryappendclone

Clone multiple dropbox selected options and combined them in to 1 appendto


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


Solution

  • 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>`)