selected value from the dropdown using HTMX framework

Question

In my HTMX page, I have two dropdown menus. I want to include the selected values from both dropdowns in a GET request. I've noticed that HTMX automatically includes the current dropdown's request parameter with its value in the GET request. However, I need both values to be part of the URL.

I'm also utilizing jQuery. Can you please provide a solution using either HTMX or jQuery?

<select id="plan-id" name="planCode"
     hx-get="change.html?planCode=&durationCode=" hx-trigger="change" hx-target='#rental-id' hx-indicator=".htmx-indicator">

     <option value=“A">Plan A</option>
     <option value=“B”>Plan B</option>
     <option value=“C”>Plan C</option>
</select>

<option value="1">1 Years</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>

```

Tried this solution. But it did not work. HTMX log says correctly Can someone explain me what I am doing wrong here?

document.getElementById('plan-id').addEventListener('change', function () {
      const selectedPlan = this.value;
      const selectedDuration = document.getElementById('duration-id').value;
      const url = `change.html?planCode=` + encodeURIComponent(selectedPlan) + `&durationCode=` + encodeURIComponent(selectedDuration);
      this.setAttribute('hx-get', url);
      htmx.logAll();
      htmx.trigger('#plan-id', 'get', { url: url });
    });

Answer 1

Try wrapping the select boxes with form tag and include hx-get in it. HTMX should then include all values within the form as params.

Example:

<form>
    <select id="plan-id" name="planCode" hx-get="change.html" hx-trigger="change" hx-target='#rental-id' hx-indicator=".htmx-indicator" hx-include="[name='durationCode']">

        <option value=“A">Plan A</option>
        <option value=“B”>Plan B</option>
        <option value=“C”>Plan C</option>
    </select>


    <select id="duration-id" name="durationCode" hx-get="change.html" hx-trigger="change" hx-target="#rental-id" hx-indicator=".htmx-indicator" hx-include="[name='planCode']">

        <option value="1">1 Years</option>
        <option value="2">2 Years</option>
        <option value="3">3 Years</option>
    </select>
</form>

Alternative solution (both select change and button submit will trigger request):

<form hx-get="change.html" hx-trigger="submit, change">
    <select id="plan-id" name="planCode" hx-target='#rental-id' hx-indicator=".htmx-indicator">
        <option value="A">Plan A</option>
        <option value=“B”>Plan B</option>
        <option value=“C”>Plan C</option>
    </select>

    <select id="duration-id" name="durationCode" hx-target="#rental-id" hx-indicator=".htmx-indicator">
        <option value="1">1 Years</option>
        <option value="2">2 Years</option>
        <option value="3">3 Years</option>
    </select>

    <button type="submit">Submit</button>
</form>