如何将 Mapbox 商店定位器列表更改为下拉列表并触发 href 链接

Question

need some advice or help with Mapbox original sample JS code, how to make from this peace of code dropdown instead of listings?

The idea is: change Mapbox store locator listings to the dropdown. Any help would be nice, thanks!

I change some parts of code, but inside the dropdown is link I need to trigger this href link for map marker action, and here I need some help..

I have this: (JS)

/**
   * Add a listing for each store to the sidebar.
  **/
  function buildLocationList(data) {
    data.features.forEach(function(store, i){
      /**
       * Create a shortcut for `store.properties`,
       * which will be used several times below.
      **/
      var prop = store.properties;

      /* Add a new listing section to the sidebar. */
      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('option'));
      /* Assign a unique `id` to the listing. */
      listing.id = "listing-" + prop.id;
      /* Assign the `item` class to each listing for styling. */
      listing.className = 'item';

      /* Add the link to the individual listing created above. */
      var link = listing.appendChild(document.createElement('a'));
      link.href = '#';
      link.className = 'title';
      link.id = "link-" + prop.id;
      link.innerHTML = prop.text;

      /* Add details to the individual listing. */
      var details = listing.appendChild(document.createElement('span'));
      details.innerHTML = prop.text;
      details.innerHTML = prop.address;

      /**
       * Listen to the element and when it is clicked, do four things:
       * 1. Update the `currentFeature` to the store associated with the clicked link
       * 2. Fly to the point
       * 3. Close all other popups and display popup for clicked store
       * 4. Highlight listing in sidebar (and remove highlight for all other listings)
      **/
      link.addEventListener('click', function(e){
        for (var i=0; i < data.features.length; i++) {
          if (this.id === "link-" + data.features[i].properties.id) {
            var clickedListing = data.features[i];
            flyToStore(clickedListing);
            createPopUp(clickedListing);
          }
        }
        var activeItem = document.getElementsByClassName('active');
        if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');
      });
    });
  } 

here is: (html)

<div class='sidebar'>
  <select id='listings' class='listings'></select>
</div>

this is html after js do the magic:

<div class="sidebar">
  <select id="listings" class="listings">
<option id="listing-0" class="item"><a href="#" class="title" id="link-0">store1</a><span>Address here</span></option>

........ here is more options .......
</div>

need trigger <a href="#" class="title" id="link-0">store1</a> when dropdown selected?!

Answer 1

You can't have a link inside a select option. What you can do is write the link as data attribute to the options. As the example doesn't work as Stack Snippet, here's a Fiddle .

$("select").on("change", function() {
  window.open($(this).find("option:selected").attr("data-link"), '_blank');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
  <select id="listings" class="listings">
    <option value="0">Select store</option>
    <option id="listing-0" class="item" data-link="https://www.google.com">store1 Address here</option>
    <option id="listing-1" class="item" data-link="https://www.stackoverflow.com">store2 Address here</option>
  </select>
</div>

Answer 2

here is the final code that works for me as I want it. hope its help someone to solve a similar problem;;))

a part of code from Mapbox JS I customize:

/**
   * Add a listing for each store to the sidebar.
  **/
 function buildLocationList(data) {
    data.features.forEach(function(store, i){
      /**
       * Create a shortcut for `store.properties`,
       * which will be used several times below.
      **/
      var prop = store.properties;

      /* Add a new listing section to the sidebar. */
      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('span'));
      /* Assign a unique `id` to the listing. */
      listing.id = "listing-" + prop.id;
      /* Assign the `item` class to each listing for styling. */
      listing.className = 'item';

      /* Add the link to the individual listing created above. */
      var link = listings.appendChild(document.createElement('option'));
      link.href = '#';
      link.className = 'title';
      link.id = "link-" + prop.id;
      link.innerHTML = prop.address;

      document.getElementById('listings').addEventListener('change',function(){
            $(this).find('span').attr("data-link");
        });

      /**
       * Listen to the element and when it is clicked, do four things:
       * 1. Update the `currentFeature` to the store associated with the clicked link
       * 2. Fly to the point
       * 3. Close all other popups and display popup for clicked store
       * 4. Highlight listing in sidebar (and remove highlight for all other listings)
      **/
      link.addEventListener('click', function(e){
        for (var i=0; i < data.features.length; i++) {
          if (this.id === "link-" + data.features[i].properties.id) {
            var clickedListing = data.features[i];
            flyToStore(clickedListing);
            createPopUp(clickedListing);
          }
        }
        var activeItem = document.getElementsByClassName('active');
        if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');
      });
    });
  }

And here is the part of HTML for dropdown:

 <fieldset>
  <select id='listings' class='listings' name="some_txt_here" >
  <option selected>---select your place--</option>
</select>
  <label class="bars-txt" for="city">
    <span data-text="some_txt_here">some_txt_here</span>
  </label>
</fieldset>