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

Time:03-11

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