Share via

asp.net core select option inside a href

Ali Yılmaz 81 Reputation points
2022-07-26T05:38:21.357+00:00

Hi,

I have such a code. I want to convert this code to the code below. As an image, Select2 will be able to scroll as far as below.

When you select it, the page will be postback and that url will go.

  <div class="dropdown-menu">  
                    @foreach (var item2 in Model.SubCustomers)  
                    {  
                        <a class="dropdown-item" asp-controller="Home" asp-action="CustomerBranch" asp-route-Code="@item2.Code" asp-route-returnUrl="@returnUrl">@item2.Code / @item2.PublicTitle/ @item2.AddressDetail</a>  
                    }  
                </div>  

I want to change below

 <select class="js-example-basic-single" name="state">  
                    @foreach (var item2 in Model.SubCustomers)  
                    {  
  
                        <option asp-controller="Home" asp-action="CustomerBranch" asp-route-Code="@item2.Code" asp-route-returnUrl="@returnUrl">  
  
                            @item2.Code / @item2.PublicTitle/ @item2.AddressDetail  
  
                        </option>  
                    }  
                </select>  
Developer technologies | ASP.NET Core | Other

3 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 84,076 Reputation points
    2022-07-26T22:42:07.337+00:00

    I don't use select2 but this should work:

        <label>Select Link</label>  
        <select id="single" class="js-states form-control">  
          <option value="https://google.com">Google</option>  
          <option value="https://msn.com">Msn</option>  
        </select>  
    
        <!-- jQuery -->  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
        <!-- Select2 -->  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>  
    
        <script>  
          $("#single").select2({  
              placeholder: "Select Link",  
              allowClear: true  
          }).on('select2:select', function (e) {  
            var url = e.params.data.id;  
            window.location = url;  
          });;  
        </script>  
      
    

    Was this answer helpful?


  2. Ali Yılmaz 81 Reputation points
    2022-07-26T19:08:24.113+00:00

    Hi,

    Can you make an example if you understood my point.

    Was this answer helpful?

    0 comments No comments

  3. Bruce (SqlWork.com) 84,076 Reputation points
    2022-07-26T18:02:04.663+00:00

    options don't support an href, so the asp-* attributes don't mean much. you should set the option value to the url. then on the select2 select event, navigate to url (location.href=url)

    Was this answer helpful?

    0 comments No comments

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.