Pass dropdown value to onclick method-CodePudding

I have a dropdown and link. I'm trying to pass selected dropdown value to onclick.

    <div>
        <select  id="venflows">
            <option value="marcus">marcus</option>
            <option value="bruno">bruno</option>
            <option value="jadon">jadon</option>
            {% endfor %}
        </select>
    </div>



        <div>
            <a onclick="window.location.href = 'download/dropdown_selected_value_here'"></a>
        </div>

Here i'm trying to pass selected dropdown value to click. Ex: if marcus is selected when onclick it should be like this

        <div>
            <a onclick="window.location.href = 'download/marcus'"></a>
        </div>

Ex: if bruno is selected when onclick it should be like this

        <div>
            <a onclick="window.location.href = 'download/bruno '"></a>
        </div>

CodePudding user response：

To answer your question as posed

<a onclick="window.location.href = 'download/' document.getElementById('venflows').value"></a>

But I recommend an eventListener

document.getElementById("link").addEventListener("click", function() {
  const url = `download/${document.getElementById("venflows").value}`
  console.log(url); // for testing
  this.href = url;
})

<div>
  <select  id="venflows">
    <option value="marcus">marcus</option>
    <option value="bruno">bruno</option>
    <option value="jadon">jadon</option>
  </select>
</div>
<div>
  <a href="" id="link">GO</a>
</div>

CodePudding user response：

If you want onclick event then you can try this

       <select  id="venflows" onclick="customFunction(this)">
            <option value="marcus">marcus</option>
            <option value="bruno">bruno</option>
            <option value="jadon">jadon</option>
            {% endfor %}
        </select>
          
       <div>
            <a onclick="window.location.href = 'download/dropdown_selected_value_here'" id="url_nav"></a>
        </div>
     
        function customFunction(curObj){
            document.getElementById("url_nav").onclick = "window.location.href = 'download/' curObj.value "
        }