如何使用 Jquery 获得选择的选项来更改链接的 href？

Question

I'm trying to get a link to change when an option is selected using the code below, it works when I add the class to the select tag but not too the option tag. I think its probably a typo but not sure?

<script>

$(document).ready(function(){
  $(".pickau").click(function(){
    $("#trigger").attr("href", "https://www.location.com.au");
  });
});

$(document).ready(function(){
  $(".picknz").click(function(){
    $("#trigger").attr("href", "https://www.location.co.nz");
  });
});

</script> 

And my dropdown and the link I'm trying to change based on the location selected:

<label>What Country Are You In? (required)</label>
<select>
<option class="picknz">New Zealand</option>
<option class="pickau">Australia</option>
</select>  

<a href="http://www.location.co.nz/" id="trigger"><p>Location Link</p></a>

<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>

Answer 1

click event on option is invalid (In javascript too)

Use change event on select , also you can get value directly from option dynamically

One more thing, only one $(document).ready function is enough. You can wrap all of your code in that function

 $(document).ready(function(){ $("#mySelect").change(function(evt){ $("#trigger").attr("href", evt.target.value); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>What Country Are You In? (required)</label> <select id="mySelect"> <option value="https://www.location.co.nz">New Zealand</option> <option value="https://www.location.com.au">Australia</option> </select> <a href="http://www.location.co.nz/" id="trigger"><p>Location Link</p></a> <p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>

Update If the second link is fixed as /help , then you can do something like

<a href="http://www.location.co.nz/help" id="triggerHelp"><p>Location Link</p></a>

$("#mySelect").change(function(evt){
 $("#trigger").attr("href", evt.target.value);
 $("#triggerHelp").attr("href", evt.target.value + '/help');
});